OLAP：ピボットチャート

ピボットグリッドは便利ですが、集計データを伝えるには、チャートの方が効果的なこともあります。

PivotChartはFlexChartコントロールの拡張なので、同様のプロパティを持ちます。

PivotChartを使用するには、PivotChart.itemsSourceプロパティをPivotEngineまたはPivotPanelのインスタンスに設定して、2つのコンポーネントを接続します。

PivotEngineの使用：

var ng = new wjOlap.PivotEngine({
    itemsSource: getData(),
    valueFields: ['金額'],
    rowFields: ['担当者', '分類'],
});

var pivotChart = new wjOlap.PivotChart('#pivotChart', {
    itemsSource: ng,
    showTitle: true,
    showLegend: 'Auto'
});

PivotPanelの使用：

var ng = new wjOlap.PivotEngine({
    itemsSource: getData(),
    valueFields: ['金額'],
    rowFields: ['担当者', '分類'],
});

var panel = new wjOlap.PivotPanel("#panel", {
    itemsSource: ng
});
var pivotChart = new wjOlap.PivotChart('#pivotChart', {
    itemsSource: panel,
    showTitle: true,
    showLegend: 'Auto'
});

チャートタイプ

PivotChartは、6個のチャートタイプをサポートします。以下のPivotChartType列挙から選択できます。

チャートタイプ	値	説明
Column	0	縦棒グラフです。縦棒を表示して、カテゴリ間で項目の値を比較できるようにします
Bar	1	横棒グラフです。水平バーを表示します
Line	2	折れ線グラフです。X座標とY座標を使用して、データに含まれるパターンを表示します
Scatter	3	散布図グラフです。一定期間のトレンドまたはカテゴリ間のトレンドを表示します
Area	4	面グラフです。線の下の領域が色で塗りつぶされた折れ線グラフを表示します
Pie	5	円グラフです。

特定のチャートを使用するには、PivotChartのchartTypeプロパティをこれらのいずれかに設定します。

pivotChart.chartType = wjOlap.PivotChartType.Column
// または
pivotChart.chartType = 0;

タイトル

チャートのshowTitleプロパティを使用して、自動的に生成されたタイトルをチャートに表示するどうかを決定できます。デフォルトでは、このプロパティはtrueに設定されます。したがって、プロパティ設定を省略すると、タイトルが表示されます。

凡例

チャートのshowLegendプロパティを使用して、自動的に生成された凡例をチャートに表示するどうかを決定できます。

wijmo.olap.LegendVisibility列挙を使用して動作を決定します。

オプション	値	説明
Always	0	常に凡例を表示します
Never	1	常に凡例を表示しません
Auto	2	チャートに1つ以上の系列がある場合に凡例を表示します

pivotChart.showLegend = wjOlap.LegendVisibility.Column
// または
pivotChart.showLegend = 0;

エクスポート

PivotChartをエクスポートすることもできます。チャートのsaveImageToFileメソッドを使用して、チャートを画像ファイルにエクスポートします。

この例は、ボタンのイベントリスナーを使用してアクションを実行します。

// チャートを画像にエクスポートします
document.getElementById('export').addEventListener('click', function(e) {
    if (e.target instanceof HTMLButtonElement) {
        var ext = e.target.textContent.trim();
        pivotChart.saveImageToFile('FlexChart.png');  
    }
});