React チャートの選択

React {ComponentTitle} の Ignite UI for React 選択機能を使用すると、ユーザーはチャート内の単一または複数のシリーズを対話的に選択、ハイライト表示、アウトライン表示したり、その逆の選択を解除したりできます。これにより、提示されたデータをユーザーがより意味のある方法で操作するさまざまな可能性が提供されます。

選択の設定

デフォルトの動作 selectionMode はオフになっており、次のいずれかのオプションを選択する必要があります。{ComponentName} に使用可能な選択モードがいくつかあります。

Auto
None
Brighten
FadeOthers
GrayscaleOthers
FocusColorThickOutline
FocusColorOutline
SelectionColorThickOutline
SelectionColorOutline
FocusColorFill
SelectionColorFill
ThickOutline

Brighten は選択した項目をフェードアウトしますが、FadeOthers は反対の効果を引き起こします。 GrayscaleOthers は FadeOthers と同様に動作しますが、シリーズの残りの部分にはグレー色を表示します。これは selectionBrush 設定をオーバーライドすることに注意してください。 SelectionColorOutline と SelectionColorThickOutline はシリーズの周囲に境界線を描画します。

併せて、どの項目を選択するかをより細かく制御できる selectionBehavior も利用できます。Auto のデフォルトの動作は PerSeriesAndDataItemMultiSelect です。

Auto
PerDataItemMultiSelect
PerDataItemSingleSelect
PerSeriesAndDataItemMultiSelect
PerSeriesAndDataItemSingleSelect
PerSeriesAndDataItemGlobalSingleSelect
PerSeriesMultiSelect
PerSeriesSingleSelect

Color Fill (塗りつぶし) による選択の設定

次の例は、SelectionColorFill と Auto の両方の選択動作の組み合わせ、つまり PerSeriesAndDataItemMultiSelect を示しています。塗りつぶしは、シリーズ項目全体の背景色を変更するため、便利な視覚的な合図を提供します。各項目をクリックすると、項目が緑から紫に変わります。

複数選択の構成

その他の選択モードでは、さまざまな選択方法が提供されます。たとえば、PerDataItemMultiSelect とともに selectionBehavior を使用すると、複数のシリーズが存在する場合にカテゴリ全体のすべてのシリーズに影響し、カテゴリ間での選択が可能になります。PerDataItemSingleSelect と比較すると、一度に選択できるのは 1 つのカテゴリの項目のみです。これは、複数のシリーズが異なるデータソースにバインドされている場合に役立ち、カテゴリ間の選択をより細かく制御できます。 PerSeriesAndDataItemGlobalSingleSelect を使用すると、一度にすべてのカテゴリで単一のシリーズを選択できます。

アウトライン選択の構成

focusBrush を適用すると、selectionMode プロパティがフォーカスオプションの 1 つに設定されている場合に、選択されたシリーズが境界線付きで表示されます。

ラジアルシリーズの選択

この例では、各ラジアルシリーズを異なる色で選択できる IgrDataChart を介した別のシリーズタイプを示します。

プログラムによる選択

チャートの選択項目は、起動時や実行時にチャートの選択項目を表示するようにコードで設定することもできます。これは、IgrCategoryChart の SelectedSeriesCollection に項目を追加することで実現できます。IgrChartSelection オブジェクトの matcher プロパティを使用すると、「マッチャー」に基づいてシリーズを選択できます。これはチャートから実際のシリーズにアクセスできない場合に最適です。データソースに含まれるプロパティがわかっていれば、シリーズが使用される ValueMemberPath を使用できます。

マッチャーは、IgrDataChart のように実際のシリーズにアクセスできない場合、IgrCategoryChart などのチャートで使用するのに最適です。この場合、データソースに含まれるプロパティがわかっていれば、シリーズに含まれる ValueMemberPaths を推測できます。たとえば、データソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズをハイライト表示する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを selectedSeriesItems コレクションに追加できます。

たとえば、データソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズを選択する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを SelectedSeriesItems コレクションに追加できます。

API リファレンス

以下は上記のセクションで説明した API メンバーのリストです。

`IgrCategoryChart` プロパティ	`IgrDataChart` プロパティ