チャート：グループ化とドリルダウン

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

CollectionViewを使用したグループ化

CollectionView.groupDescriptionsプロパティを使用して、どのフィールドをグループ化するかを指定します。

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

// 国、商品、色、および種類でグループ化されたデータを含む 
// CollectionViewを作成します
var view = new wijmo.CollectionView(getData(), {
    groupDescriptions: 'country,product,color,type'.split(',')
});

グループ化されたデータをFlexChartで使用するには、特定のグループに属するデータを返すメソッドをコードに追加します。

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

// チャートを作成します
var myChart = new chart.FlexChart('#myChart', {
    itemsSource: getGroupData(view), // 第1レベルのグループ化を表示します
    bindingX: 'name',
    series: [{
        binding: 'sales',
        name: '売上'
    }]
});

次の例のgetGroupDataメソッドは、チャートにプロットされるnameフィールドとsalesフィールドを含むオブジェクト配列を返します。

// 選択したポイントのグループデータを取得します
function getGroupData(group) {

    // salesで集計されたこのグループの項目を取得します
    var arr = [];
    group.groups.forEach(function(g) {
        arr.push({
            name: g.name,
            sales: g.getAggregate('Sum', 'sales'),
            group: g
        });
    });

    // salesでソートされた新しいコレクションビューを返します
    return new wijmo.CollectionView(arr, {
        sortDescriptions: [
            new wijmo.SortDescription('sales', false)
        ]
    });
}

ドリルダウンのシナリオ

チャートでグループ化を使用する場合は、いくつかのカテゴリにグループ化されたデータポイントを最初に表示し、カテゴリがクリックされたときにチャートに再ロードして、グループを構成する個々のデータポイントを表示することが普通です。

対話式のクリック操作を処理するには、hitTestイベントまたはselectionChangedイベントを使用します。次の例では、選択項目を使用してグループ化データを取得し、そのデータをFlexChartの新しいitemsSourceとして設定しています。

myChart.selectionMode = 'Point'; // 選択を有効にします
myChart.selectionChanged = function(s, e) {
    if (s.selection) {
        var point = s.selection.collectionView.currentItem;
        if (point && point.group && !point.group.isBottomLevel) {
            myChart.itemsSource = getGroupData(group);
        }
    }
}

FlexChartデモにあるサンプルで、完全なグループ化とドリルダウンの動作を確認できます。

日付集計系列（リサーチ）

AggregateSeriesクラスはAggregateDateSeries サンプルの一部です。これは、日付オブジェクトの使用時に、グループ化とデータ集計を簡素化するカスタム系列です。

たとえば、他の系列と同様に集計系列をFlexChartに追加できます。groupAggregateプロパティおよびgroupIntervalプロパティを設定して、データの集計方法と集計間隔を指定します。

import * as chart from '@mescius/wijmo.chart';
import { AggregateSeries } from './aggregate-series';

var myChart = new chart.FlexChart('#myChart');
myChart.beginUpdate();
myChart.itemsSource = getAppData();

// 1年ごとの集計データ系列を作成します
var series = new AggregateSeries();
series.name = 'Sales';
series.binding = 'sales';
series.bindingX = 'date';
series.groupAggregate = 'Sum';
series.groupInterval = 'YYYY';
myChart.series.push(series);
myChart.endUpdate();

groupAggregateプロパティは、Sum、Avg（平均）、Cnt（個数）、Max、Min、Rng（範囲）、Std（標準偏差）、StdPop（母標準偏差）、Var（分散）、およびVarPop（母分散）をサポートしています。

groupIntervalプロパティは、DD（日）、WW（週）、MM（月）、およびYYYY（年）をサポートしています。

また、FlexChartでは、autoIntervalをtrueに設定し、目的の間隔を指定することで、集計間隔を自動的に作成できます。

series.autoGroupIntervals = ["DD", "WW", "MM", "YYYY"];
series.autoInterval = true;