Blazor チャート ツールチップ
Blazor チャートでは、ツールチップはバインドされたデータに関する詳細を提供し、エンドユーザーがデータ ポイントにカーソルを合わせるとポップアップで表示されます。ツールチップは、IgbCategoryChart、IgbFinancialChart、および IgbDataChart コンポーネントでサポートされています。
Blazor チャート ツールチップのタイプ
次の例は、開始時に ToolTipType プロパティを “Default” に設定することでツールチップが有効にした縦棒チャートを示しています。このプロパティはサンプルで構成可能であり、次のいずれかのオプションに設定できます。
ToolTipType プロパティは構成可能であり、次のいずれかのオプションに設定できます。
| プロパティの値 | 説明 |
|---|---|
Default ツールチップ | ツールチップは、ポインタがその上に位置されると、単一の項目のツールチップを表示します。 |
Data ツールチップ | チャートのすべてのシリーズのデータ ツールチップを表示します。 |
Item ツールチップ | ツールチップは、ポインタが位置されているカテゴリの各データ項目のツールチップを表示します。 |
Category ツールチップ | ツールチップはポインターがデータ ポイント上に配置されたときにすべてのデータ ポイントに対してツールチップを表示できます。 |
Blazor チャート ツールチップ テンプレート
組み込みタイプのツールチップがいずれも要件に一致しない場合は、独自のツールチップを作成して、シリーズ タイトル、データ値、および軸値を表示およびスタイル設定できます。次のセクションでは、さまざまなタイプの Blazor チャートでこれを行う方法を示します。
カテゴリ チャートのカスタム ツールチップ
この例は、Blazor IgbCategoryChart コントロールですべてのシリーズのカスタム ツールチップを作成する方法を示しています。Blazor IgbFinancialChart コントロールのカスタム ツールチップにも同じロジックを適用できることに注意してください。
データ チャートのカスタム ツールチップ
この例は、Blazor データ チャート コントロールで各シリーズのカスタム ツールチップを作成する方法を示しています。
その他のリソース
関連するチャート機能の詳細については、以下のトピックを参照してください。
API リファレンス
IgbDataToolTipLayer
IgbCategoryChart
IgbFinancialChart
IgbDataChart