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