チャート：データ連結

FlexChartを使用すると、表形式のデータをビジネスチャートとして視覚化できます。選択、ズーム、ドリルダウン、書式設定など、データの表示方法や対話式操作方法に関するさまざまなオプションが提供されています。

FlexChartをデータ連結するには、次の手順に従います。

itemsSourceプロパティを、通常のJavaScriptオブジェクトを含む配列に設定して、チャートを連結します。
bindingXプロパティを、X軸にプロットされるソースデータのフィールド名に設定します。
チャートのseries配列に、各系列のY軸にどのデータフィールドをプロットするかを定義するオブジェクトを設定します。

import * as wjChart from '@mescius/wijmo.chart';

var myChart = new wjChart.FlexChart('#myChart', {
    itemsSource: appData,
    bindingX: 'country',
    series: [
        { name: '売上', binding: 'sales' },
        { name: '費用', binding: 'expenses' },
        { name: 'DL数', binding: 'downloads' }
    ]
});

FlexChartは、チャートのitemsSourceに基づいて、系列コレクションに自動的に項目を挿入します。

FlexChartの初期化

上の例では、FlexChartコンストラクタに渡されるパラメータとして初期化が行われました。次のように、initializeメソッドを使用して、この初期化プロセスを別途行うこともできます。

import * as wjChart from '@mescius/wijmo.chart';

 var myChart = new wjChart.FlexChart('#myChart');
 myChart.initialize({
     itemsSource: appData,
     bindingX: 'country',
     series: [
         { name: '売上', binding: 'sales' },
         { name: '費用', binding: 'expenses' },
         { name: 'DL数', binding: 'downloads' }],
 });

さらに、プロパティに直接アクセスしてFlexChartを設定することもできます。これを_beginUpdate_呼び出しと_endUpdate_呼び出しの間に実行して、その間の通知を停止します。

var myChart = new wjChart.FlexChart('#myChart');
myChart.beginUpdate();

myChart.bindingX = 'country';
myChart.itemsSource = getAppData();

// データ系列を作成します
var series1 = new wjChart.Series();
series1.name = '売上';
series1.binding = 'sales';
myChart.series.push(series1);
myChart.endUpdate();

CollectionViewの使用

すべてのWijmoコントロールと同様に、チャートは、すべてのデータ関連タスクをCollectionViewクラスで実行します。そのため、データのフィルタ処理、ソート、またはグループ化は、CollectionViewを使用して行うことができます。FlexChartは、列が系列で表され、行がチャート上のデータポイントで表される特別なタイプのデータグリッドだと考えるとわかりやすいでしょう。

チャートのitemsSourceプロパティを配列（ObservableArray）に設定すると、元の配列をラップするCollectionViewインスタンスが自動的に作成されます。FlexChartはCollectionViewクラスをデータソースとして使用しているため、データに加えた変更はチャートに自動的に反映されます。このCollectionViewにアクセスする必要がある場合は、collectionViewプロパティによって公開されます。

たとえば、チャートのcollectionViewのsortDescriptionsプロパティを変更して、データをソートできます。

import * as wijmo from '@mescius/wijmo';

var sd = myChart.collectionView.sortDescriptions;
sd.clear();
sd.push(new wijmo.SortDescription(prop, true))

複数のデータソースへの連結

FlexChartのitemsSourceプロパティとbindingXプロパティは、デフォルトではチャートのすべての系列に適用されます。

特定の系列でこれらのプロパティをオーバーライドして、別のデータソースや連結を使用することができます。これにより、同じチャートで複数のデータソースを使用することができ、チャートに使用するデータを前処理する必要性が低くなります。

import * as wjChart from '@mescius/wijmo.chart';

var myChart = new wjChart.FlexChart('#myChart', {
    series: [
        {
            name: '実験1', 
            itemsSource: getData(50, 0, 3),
            bindingX: 'x',
            binding: 'y'
        },
        {
            name: '実験2',
            itemsSource: getData(40, 100, 12),
            bindingX: 'x', 
            binding: 'y'
        },
        {
            name: '実験3',
            itemsSource: getData(30, -100, 24),
            bindingX: 'x', 
            binding: 'y'
        }
    ]
});