Web Components チャート ツールチップ

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

Web Components チャート ツールチップのタイプ

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

EXAMPLE

DATA

TS

HTML

CSS

export class HighestGrossingMoviesItem {
    public constructor(init: Partial<HighestGrossingMoviesItem>) {
        Object.assign(this, init);
    }

    public franchise: string;
    public totalRevenue: number;
    public highestGrossing: number;

}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
    public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new HighestGrossingMoviesItem(
                {
                    franchise: `Marvel Universe`,
                    totalRevenue: 22.55,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Star Wars`,
                    totalRevenue: 10.32,
                    highestGrossing: 2.07
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Harry Potter`,
                    totalRevenue: 9.19,
                    highestGrossing: 1.34
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Avengers`,
                    totalRevenue: 7.76,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Spider Man`,
                    totalRevenue: 7.22,
                    highestGrossing: 1.28
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `James Bond`,
                    totalRevenue: 7.12,
                    highestGrossing: 1.11
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private toolTipTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private legend: IgcLegendComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var toolTipTypeEditor = this.toolTipTypeEditor = document.getElementById('ToolTipTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.chart;
            chart.legend = this.legend;
            chart.dataSource = this.highestGrossingMovies;
        }
        this._bind();
    }

    private _highestGrossingMovies: HighestGrossingMovies = null;
    public get highestGrossingMovies(): HighestGrossingMovies {
        if (this._highestGrossingMovies == null)
        {
            this._highestGrossingMovies = new HighestGrossingMovies();
        }
        return this._highestGrossingMovies;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            LegendDescriptionModule.register(context);
            CategoryChartDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options vertical">
        <igc-property-editor-panel
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="ToolTipType"
            name="ToolTipTypeEditor"
            id="ToolTipTypeEditor"
            label="ToolTip Type: "
            primitive-value="Data">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Highest Grossing Movie Franchises
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        x-axis-interval="1"
        y-axis-title="Billions of U.S. Dollars"
        y-axis-title-left-margin="10"
        y-axis-title-right-margin="5"
        y-axis-label-left-margin="0"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        crosshairs-snap-to-data="true">
        </igc-category-chart>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

Web Components チャート ツールチップ テンプレート

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

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

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

EXAMPLE

TS

HTML

CSS

import { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDomainChartComponent } from 'igniteui-webcomponents-charts';
import { IgcChartSeriesEventArgs } from 'igniteui-webcomponents-charts';

ModuleManager.register(IgcCategoryChartModule);
ModuleManager.register(IgcDataChartInteractivityModule);

export class CategoryChartTooltipTemplate {

    private chart: IgcCategoryChartComponent;

    public data: any[] = [];

    constructor() {

        this.initData();

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.seriesAdded = this.onSeriesAdded;
        this.chart.dataSource = this.data;
    }

    public onSeriesAdded = (s: IgcDomainChartComponent, e: IgcChartSeriesEventArgs) => {
        if (e.series) {
            e.series.tooltipTemplate = this.createCategoryChartTooltipTemplate;
        }
    }

    public createCategoryChartTooltipTemplate(context: any) : any {

        if (!context) return null;

        var dataItem = context.item;
        if (!dataItem) return null;

        var tooltipItem1 = document.createElement("div");
        tooltipItem1.innerHTML = "Franchise: " + dataItem.Franchise;
        tooltipItem1.className = "tooltipTitle";

        var tooltipItem2 = document.createElement("div");
        tooltipItem2.innerHTML = "Revenue of All Movies: " + dataItem.TotalRevenue;
        tooltipItem2.className = "tooltipLbl";

        var tooltipItem3= document.createElement("div");
        tooltipItem3.innerHTML = "Highest Grossing Movie: $" + dataItem.HighestGrossing;
        tooltipItem3.className = "tooltipLbl";

        var tooltip = document.createElement("div");
        tooltip.className = "tooltipVertical";
        tooltip.appendChild(tooltipItem1);
        tooltip.appendChild(tooltipItem2);
        tooltip.appendChild(tooltipItem3);

        return tooltip;
    }

    public initData() {
        this.data = [
            { Franchise: "Marvel Universe All Films", TotalRevenue: 22.55, HighestGrossing: 2.8 },
            { Franchise: "Star Wars", TotalRevenue: 10.32, HighestGrossing: 2.07 },
            { Franchise: "Harry Potter", TotalRevenue: 9.19, HighestGrossing: 1.34 },
            { Franchise: "Avengers", TotalRevenue: 7.76, HighestGrossing: 2.8 },
            { Franchise: "Spider Man", TotalRevenue: 7.22, HighestGrossing: 1.28 },
            { Franchise: "James Bond", TotalRevenue: 7.12, HighestGrossing: 1.11 }
        ];
    }
}

new CategoryChartTooltipTemplate();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartTooltipTemplate</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
  <div class="options horizontal">
    <span class="legend-title">Highest Grossing Movie Franchises</span>
  </div>

  <igc-category-chart id="chart"
      width="100%"
      height="calc(100% - 3rem)"
      is-transition-in-enabled="true"
      chart-type="Column"
      tooltip-type="None"
      x-axis-interval="1">
  </igc-category-chart>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

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

EXAMPLE

DATA

TS

HTML

CSS

export class SampleCategoryData {

    public static create(): any[] {
        const data: any[] = [];
        data.push({ "Country": "Canada", "Coal": 400000000, "Oil": 100000000, "Gas": 175000000, "Nuclear": 225000000, "Hydro": 350000000 });
        data.push({ "Country": "China", "Coal": 925000000, "Oil": 200000000, "Gas": 350000000, "Nuclear": 400000000, "Hydro": 625000000 });
        data.push({ "Country": "Russia", "Coal": 550000000, "Oil": 200000000, "Gas": 250000000, "Nuclear": 475000000, "Hydro": 425000000 });
        data.push({ "Country": "Australia", "Coal": 450000000, "Oil": 100000000, "Gas": 150000000, "Nuclear": 175000000, "Hydro": 350000000 });
        data.push({ "Country": "United States", "Coal": 800000000, "Oil": 250000000, "Gas": 475000000, "Nuclear": 575000000, "Hydro": 750000000 });
        data.push({ "Country": "France", "Coal": 375000000, "Oil": 150000000, "Gas": 350000000, "Nuclear": 275000000, "Hydro": 325000000 });
        return data;
    }
}
tsコピー

import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcChartMouseEventArgs } from 'igniteui-webcomponents-charts'
import { ModuleManager } from 'igniteui-webcomponents-core';
import { SampleCategoryData } from './SampleCategoryData';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcColumnSeriesModule
);

export class DataChartTooltipTemplate {

    private chart: IgcDataChartComponent;

    constructor() {

        this.onSeriesMouseEnter = this.onSeriesMouseEnter.bind(this);
        this.createDataChartTooltip = this.createDataChartTooltip.bind(this);
        this.createDataChartTooltipLine = this.createDataChartTooltipLine.bind(this);

        this.chart = document.getElementById('chart') as IgcDataChartComponent;
        this.chart.dataSource = SampleCategoryData.create();
        this.chart.seriesMouseEnter = this.onSeriesMouseEnter;
    }

    public onSeriesMouseEnter = (s: any, e: IgcChartMouseEventArgs) => {
        if (e.series.tooltipTemplate === null ||
            e.series.tooltipTemplate === undefined) {
            e.series.tooltipTemplate = this.createDataChartTooltip;
        }
    }

    public createDataChartTooltip(context: any): any {
        if (!context) return null;

        var dataItem = context.item;
        if (!dataItem) return null;

        var dataSeries = context.series;
        if (!dataSeries) return null;

        var tooltip = document.createElement("div");
        tooltip.className = "ui-tooltip-content";

        var title = document.createElement("div");
        title.innerHTML = dataItem.Country + " Production";
        title.className = "tooltipTitle";
        tooltip.appendChild(title);

        var line1 = this.createDataChartTooltipLine(dataSeries, "Coal", dataItem.Coal);
        var line2 = this.createDataChartTooltipLine(dataSeries, "Hydro", dataItem.Hydro);
        var line3 = this.createDataChartTooltipLine(dataSeries, "Nuclear", dataItem.Nuclear);
        var line4 = this.createDataChartTooltipLine(dataSeries, "Gas", dataItem.Gas);
        var line5 = this.createDataChartTooltipLine(dataSeries, "Oil", dataItem.Oil);

        tooltip.appendChild(line1);
        tooltip.appendChild(line2);
        tooltip.appendChild(line3);
        tooltip.appendChild(line4);
        tooltip.appendChild(line5);

        return tooltip;
    }

    createDataChartTooltipLine(dataSeries: any, dataName: string, dataValue: string): any {
        var label = document.createElement("label");
        label.innerHTML = dataName + ":";
        label.className = "tooltipLbl";
        label.style.width = "4rem";

        var value = document.createElement("label");
        value.innerHTML = dataValue;
        value.className = "tooltipVal";

        var line = document.createElement("div");
        line.className = "tooltipHorizontal";

        // applying conditional styling based on mapping of the current series
        var isMatching = dataSeries.valueMemberPath == dataName;
        if (isMatching)
            line.style.color = dataSeries.actualBrush;
        else
            line.style.color = "black";

        line.appendChild(label);
        line.appendChild(value);
        return line;
    }

}

new DataChartTooltipTemplate();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartTooltipTemplate</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="container" style="height: calc(100% - 3rem)">
        <igc-data-chart id="chart" width="100%" height="100%"
            is-horizontal-zoom-enabled="false"
            is-vertical-zoom-enabled="false">

            <igc-category-x-axis name="xAxis" label="Country">
            </igc-category-x-axis>
            <igc-numeric-y-axis name="yAxis">
            </igc-numeric-y-axis>
            <igc-column-series
                name="series1"
                title="Coal"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Coal"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series2"
                title="Hydro"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Hydro"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series3"
                title="Nuclear"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Nuclear"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series4"
                title="Gas"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Gas"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series5"
                title="Oil"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Oil"
                show-default-tooltip="false">
            </igc-column-series>
        </igc-data-chart>
    </div>
</div>

    </div>
    <script src="src/index.ts"></script>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

その他のリソース

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

• チャート注釈
• チャート マーカー

API リファレンス

IgcCategoryChartComponent コンポーネントと IgcFinancialChartComponent コンポーネントは、次の API プロパティを共有します:

• toolTipType

IgcDataChartComponent コンポーネントでは、以下の API コンポーネントおよびプロパティを使用できます:

• IgcDataToolTipLayerComponent
• IgcItemToolTipLayerComponent
• IgcCategoryToolTipLayerComponent
• ShowDefaultToolTip