API version 1

- ‐

Chart

高機能グラフを表現するクラスです。

折れ線グラフ、円グラフ、棒グラフ、散布図など様々な種類のグラフを表現することができます。
Chartクラスでは全ての種類のグラフの、軸、凡例、データ系列などのグラフの基本的な情報を管理することができます。

コンストラクタによる初期化時にチャートの種類を指定します。
チャートの種類とは、各グラフの基本的な性質をもとにいくつかのグラフの種類をまとめた集まりのことです。
指定した種類ごとに、Chartオブジェクトで扱えるグラフの種類が異なることに注意してください。

典型的な利用方法

  1. チャートの種類を指定して初期化し、どのようなグラフを表示させるかを決定します。

  2. 初期化すると対応する種類のデータ系列を追加できるため、追加したいデータ系列を指定します。

  3. データ系列にデータを追加します。データの追加は ChartSeries.load メソッドが便利です。

  4. 最後に、 relayout メソッドを呼んでデータの表示範囲を自動調整します。手動で調整することもできます。

/* 1.初期化 */
Chart testChart(Chart.CHARTTYPE_XY){
      Width = 700;
      Height = 600;

      Function initChart(){
              /* 2.折れ線グラフ作成 */
              var cs = createSeries(Chart.SERIESTYPE_LINE);

              /* 3.CSVデータを読み込み */
              cs.load(^.csvdata);

              /* 4.データの表示範囲を自動調整 */
              relayout();
      }
}

testChart.initChart();

チャートの種類

Chartオブジェクトは、初期化時にどのデータ系列を追加して表示できるかが予め決まっています。 例えば、棒グラフの種類を指定して初期化されたChartは円グラフなどを追加することができません。 また、円グラフの種類を指定して初期化されたChartは2個以上の円グラフのデータ系列を追加することができない等、特殊な制限があるものもあります。


チャートの種類には下記のようなものがあります。

定数名

種類名

軸

使用可能クラス

備考(制限など)

CHARTTYPE_XY

XYグラフ

ChartValueAxis (縦/横)
特になし

CHARTTYPE_PIE

円グラフ

なし
ChartPieSeries は1個まで

CHARTTYPE_BAR

棒グラフ

ChartBarSeries は1個まで

CHARTTYPE_MULTI

2軸マルチグラフ

ChartBarSeries は1個まで

データ系列とアイテムのクラス構成・データ形式

データ系列は、内部で保持するデータの構成単位や、その要素にアクセスするためのクラス階層が種類によって大きく異なります。データを直接操作する場合は、下記の対応関係を把握しておく必要があります。


データ系列のクラス階層

ChartSeries (抽象クラス)
├─ ChartXYSeries (抽象クラス)
│   ├─ ChartLineSeries
│   ├─ ChartScatterSeries
│   └─ ChartSplineSeries
├─ ChartBarSeries (抽象クラス)
│   ├─ ChartStandardBarSeries
│   ├─ ChartStackedBarSeries
│   └─ ChartPercentBarSeries
└─ ChartPieSeries

いずれの派生クラスもスクリプトから直接 new することはできず、 createSeries メソッドで生成します。


系列の種類ごとのデータ保持構造

データ系列

データの構成単位

対応するアイテムクラス

利用可能な操作メソッド

備考

座標(x,y)の組

なし(アイテムクラスを持たない)

addItem / insertItem / removeItem / getItems

1点=1組の(x,y)。 getItems はRecord{x[],y[]}形式で全点を一括取得します。getItem(index)のような単一点取得メソッドはありません。点ごとの色やラベル等の個別プロパティは持たず、系列単位のプロパティ(color, width等)のみです。

バーセット( load での1行に対応する値の配列)

ChartBarItem

addItem / getItem / getItems / removeItem

1つの ChartBarItem は「1本のバー」ではなく「1つの凡例項目(=loadでの1行)」に対応し、内部にさらにカテゴリ数分の値の配列を持つ二重構造です。ChartBarItem自身が add/insert/at/remove/replace/truncate で内部の値配列を管理します。 new ChartBarItem([label]) で系列に属さない状態のまま単独生成し、後から ChartBarSeries.addItem(item) で系列へ追加できます。insertItemメソッドはありません(常に末尾へ追加)。

スライス1個分のラベルと値

ChartPieItem

addItem / insertItem / getItem / getItems / removeItem

1つの ChartPieItem が円グラフの1スライスに対応するシンプルな1対1構造で、内部に配列は持ちません。 new ChartPieItem([value[,label]]) で単独生成でき、 insertItem(index, item) で任意の位置に挿入できます。

上表の「利用可能な操作メソッド」は系列の種類によって微妙に異なります(例: XY系列はgetItemを持たずgetItemsのみ、Bar系列はinsertItemを持たない等)。詳細は各系列クラスのmethods一覧を参照してください。


loadメソッドとの対応

ChartSeries.load に渡すtable型データ(CSVDocument等)の1行が、上表の「データの構成単位」1つに対応します。列構成の詳細は ChartSeries.load を参照してください。


軸とデータ系列の紐付け

createSeries メソッドで軸を明示的に指定しなかった場合、下記のルールに従って自動的に既存の軸(無ければ新規作成した軸)へ紐付けられます。

データ系列

横軸(X)

縦軸(Y)

ChartStandardBarSeries 等の棒グラフ系列

ChartStringAxis

既存の縦軸のうち最初に見つかったもの

ChartLineSeries 等のXY系列

既存の横軸のうち最初に見つかったもの

既存の縦軸のうち最初に見つかったもの

ChartPieSeries

(紐付けなし)

(紐付けなし)

CHARTTYPE_MULTIにおける左右軸の注意点
CHARTTYPE_MULTIで初期化した直後は、左軸・右軸の順でChartValueAxisが2本作成されています。
上表の「既存の縦軸のうち最初に見つかったもの」は常に先に作成されている 左軸 が該当するため、軸を省略して追加したデータ系列はすべて左軸に紐付きます。
右軸にデータ系列を紐付けたい場合は、必ず getAxis (Chart.AXISALIGN_RIGHT) で右軸のアクセッサを取得し、createSeriesの第2/第3引数(xAxis, yAxis)に明示的に指定してください。
/* 右軸に折れ線グラフを紐付ける例 */
var xAxis = testChart.getAxis(Chart.AXISALIGN_BOTTOM);
var yAxisR = testChart.getAxis(Chart.AXISALIGN_RIGHT);
var cs = createSeries(Chart.SERIESTYPE_LINE, xAxis, yAxisR);

CHARTTYPE_MULTIにおける横軸(ChartStringAxis)の項目について

CHARTTYPE_MULTIの横軸は ChartStringAxis (カテゴリ軸)固定です。 この軸の項目(カテゴリ)は、 relayout メソッドを実行したタイミングで、横軸に紐付いている 棒グラフ系列(ChartBarSeries派生クラス)のデータ数 をもとに "0","1","2",... という連番の文字列として自動的に生成し直されます。

このとき、折れ線グラフ・散布図・スプライングラフ等のXY系列はカテゴリの生成には一切関与しません。
そのため、棒グラフ系列を1つも追加していない状態でrelayoutを実行すると、横軸には空文字列1個分のカテゴリしか作られず、XY系列のデータ点はほとんどが同一のX位置に重なって表示されてしまいます(見た目上、点が1つしか無いように見えます)。

回避方法・運用上の注意

  1. 棒グラフ系列(BAR/STACKEDBAR/PERCENTBAR)を先に作成してデータをloadしてから、折れ線グラフ等のXY系列を作成する

  2. XY系列側のX値(load()する数値データの1列目)には、カテゴリの連番(0,1,2,...)に対応する値を指定する

  3. 連番ではなく意味のあるラベル(月名など)を表示したい場合は、relayout実行後に ChartStringAxis.strings プロパティへ配列を設定して上書きする(サンプル ChartStrings.crs を参照)。ただし、strings設定後に再度relayoutを実行すると連番文字列に上書きされてしまう点に注意してください。


デフォルトプロパティ

Chartクラスにはデフォルトプロパティはありません。