5.20213.824
5.20213.824

チャート:選択

FlexChart、FlexPie、FlexRadar、Sunburstの各コントロールでは、クリックまたはタッチすることで系列やデータポイントを選択できます。selectionModeプロパティを使用して、系列またはデータポイントによる選択を可能にするか、または何も選択しないかを指定できます(デフォルトでは無効)。

myChart.selectionMode: 'Series';

サポートされている選択モード:

  • Point:チャートをクリックしたときにデータポイントが選択されます。
  • Series:チャートをクリックしたときに系列全体が選択されます。
  • None:チャートをクリックしたときに系列もデータポイントも選択されません。

メモ:

  • 折れ線チャート、面チャート、スプラインチャート、およびスプライン面チャートでは、個々のデータポイントがレンダリングされないため、Point選択モードを使用すると何も選択されません。
  • selectionModeは、TreeMapコントロールでは機能しません。

選択のスタイル設定

selectionModeプロパティをSeriesまたはPointに設定した場合、ユーザーがマウスをクリックすると、FlexChartはSelectionプロパティを更新し、選択されているチャート要素に「wj-state-selected」クラスを適用します。

.wj-flexchart .wj-state-selected {
    stroke: rgba(0,0,0,.5);
    stroke-width: 3;
    stroke-dasharray: 1;
}

選択の操作

チャートの選択メカニズムはCollectionViewクラスに基づいているため、同じデータソースに複数のコントロールが接続されている場合は、選択がコントロール間で自動的に同期されます。

Selectionプロパティは、現在選択されている系列を返します。現在選択されているデータポイントを取得するには、例で示すように、Series.collectionView.currentItemプロパティを使用して、選択されている系列の現在の選択項目を取得します。

ユーザーがチャートをクリックするか、プログラムにより、選択範囲が変更された後にselectionChangedイベントが発生します。現在の選択範囲を示すテキストボックスの詳細を更新する場合などに便利です。

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

// チャートを作成します
var theChart = new chart.FlexChart('#theChart', {
    selectionMode: 'Point', // 選択を有効にします
    selectionChanged: function(s, e) {
        if (s.selection) {
            var point = s.selection.collectionView.currentItem;
            // データポイントからテキスト値を取得します
            // var text =
        }
    }
});

FlexPieの選択

FlexPieコントロールを使用すると、円チャートセグメントをクリックまたはタッチしてデータポイントを選択できます。この選択動作は、FlexChartとは少し異なります。FlexChartと同様に、selectionModeプロパティを使用して、データポイントによる選択を可能にするか、または何も選択しないか(デフォルト)を指定できます。

FlexPieには、選択内容をカスタマイズするための3つの追加プロパティが用意されています。

  • selectedItemOffset:選択された円チャートセグメントとコントロールの中央とのオフセットを指定します。
  • selectedItemPosition:選択された円チャートセグメントの位置を指定します。使用できるオプションは、Top、Bottom、Left、Right、およびNone(デフォルト)です。
  • isAnimated:選択内容をアニメーション表示するかどうかを決定します。

例:

myChart.isAnimated = true;
myChart.selectionMode = 'Point';
myChart.selectedItemOffset = 0.2;
myChart.selectedItemPosition = 'Top';

円チャートの選択