Angular チャート ツールチップ

    Angular チャートでは、ツールチップはバインドされたデータに関する詳細を提供し、エンドユーザーがデータ ポイントにカーソルを合わせるとポップアップで表示されます。ツールチップは、IgxCategoryChartComponentIgxFinancialChartComponent、および IgxDataChartComponent コンポーネントでサポートされています。

    Angular チャート ツールチップのタイプ

    次の例は、開始時に toolTipType プロパティを "Default" に設定することでツールチップが有効にした縦棒チャートを示しています。このプロパティはサンプルで構成可能であり、次のいずれかのオプションに設定できます。

    toolTipType プロパティは構成可能であり、次のいずれかのオプションに設定できます。

    プロパティの値 説明
    Default ツールチップ ツールチップは、ポインタがその上に位置されると、単一の項目のツールチップを表示します。
    Item ツールチップ ツールチップは、ポインタが位置されているカテゴリの各データ項目のツールチップを表示します。
    Category ツールチップ ツールチップはポインターがデータ ポイント上に配置されたときにすべてのデータ ポイントに対してツールチップを表示できます。

    Angular チャート ツールチップ テンプレート

    組み込みタイプのツールチップがいずれも要件に一致しない場合は、独自のツールチップを作成して、シリーズ タイトル、データ値、および軸値を表示およびスタイル設定できます。次のセクションでは、さまざまなタイプの Angular チャートでこれを行う方法を示します。

    カテゴリ チャートのカスタム ツールチップ

    この例は、Angular IgxCategoryChartComponent コントロールですべてのシリーズのカスタム ツールチップを作成する方法を示しています。Angular IgxFinancialChartComponent コントロールのカスタム ツールチップにも同じロジックを適用できることに注意してください。

    データ チャートのカスタム ツールチップ

    この例は、Angular データ チャート コントロールで各シリーズのカスタム ツールチップを作成する方法を示しています。

    その他のリソース

    関連するチャート機能の詳細については、以下のトピックを参照してください。

    API メンバー

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