Angular ツールチップ

Angular データチャートコンポーネントは、2 つのツールチップ「レイヤー」と共にツールチップを表示できます。これらのツールチップを使用すると、データチャート内の各シリーズに関するコンテキスト情報を確認するのに役立ちます。

Angular ツールチップの例

Angular データチャートコンポーネントでツールチップレイヤーを有効にするには、対話モジュールをインポートして登録する必要があります。以下のコードを使用できます。

DataChartInteractivityModule

import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';

@NgModule({
    imports: [ IgxDataChartInteractivityModule ]
})

デフォルトツールチップ

Angular データチャートコンポーネントは、各シリーズタイプにデフォルトツールチップを提供します。デフォルトのツールチップには、シリーズのタイトル、データ値、軸の値など、ホバーされている特定のシリーズ項目に関連するすべての情報が表示されます。これらもシリーズの外観に合わせてスタイル設定されています。

次のコードスニペットは、Angular データチャートコンポーネントで既定のツールチップを有効にする方法を示しています。

<igx-data-chart #chart
    height="400px"
    width="100%"
    [dataSource]="data">

    <igx-category-x-axis #xAxis></igx-category-x-axis>
    <igx-numeric-y-axis #yAxis></igx-numeric-y-axis>

    <igx-column-series name="series1"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="Value"
        showDefaultTooltip=true>
    </igx-column-series>

</igx-data-chart>

カテゴリツールチップレイヤー

CategoryToolTipLayer は、カテゴリ軸を使用する Angular データチャートコンポーネントのシリーズ用にグループ化されたヒントを表示します。グループ化されたツールチップは現在、Angular データチャートコンポーネントの上部に表示されています。

以下のコードは、カテゴリツールチップレイヤーを Angular データチャートコンポーネントに追加する方法を示します。

<igx-data-chart #chart
    height="400px"
    width="100%"
    [dataSource]="data">

    <igx-category-x-axis #xAxis></igx-category-x-axis>
    <igx-numeric-y-axis #yAxis></igx-numeric-y-axis>

    <igx-column-series name="series1"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="Value"
        showDefaultTooltip=true>
    </igx-column-series>

    <igx-category-tooltip-layer></igx-category-tooltip-layer>

</igx-data-chart>

項目ツールチップレイヤー

項目ツールチップレイヤーは、特定のシリーズにマウスがホバーする場合に Angular データチャートコンポーネント上のすべてのシリーズに関するヒントを個別に表示します。ツールチップスタイルは、ツールチップを表示しているシリーズから継承されます。

以下のコードは、項目ツールチップレイヤーを Angular データチャートコンポーネントに追加する方法を示します。

<igx-data-chart #chart
    height="400px"
    width="100%"
    [dataSource]="data">

    <igx-category-x-axis #xAxis></igx-category-x-axis>
    <igx-numeric-y-axis #yAxis></igx-numeric-y-axis>

    <igx-column-series name="series1"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="Value"
        showDefaultTooltip=true>
    </igx-column-series>

    <igx-item-tooltip-layer></igx-item-tooltip-layer>

</igx-data-chart>

Angular ツールチップ