Blazor チャートの選択
Blazor {ComponentTitle} の Ignite UI for Blazor 選択機能を使用すると、ユーザーはチャート内の単一または複数のシリーズを対話的に選択、ハイライト表示、アウトライン表示したり、その逆の選択を解除したりできます。これにより、提示されたデータをユーザーがより意味のある方法で操作するさまざまな可能性が提供されます。
選択の設定
デフォルトの動作 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 つに設定されている場合に、選択されたシリーズが境界線付きで表示されます。
ラジアル シリーズの選択
この例では、各ラジアル シリーズを異なる色で選択できる IgbDataChart を介した別のシリーズ タイプを示します。
API リファレンス
以下は上記のセクションで説明した API メンバーのリストです。
IgbCategoryChart プロパティ |
IgbDataChart プロパティ |
|---|---|