React チャート ツールチップ

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

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

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

EXAMPLE

DATA

TSX

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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from "@infragistics/igniteui-react-core";
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';

import 'igniteui-webcomponents/themes/light/bootstrap.css';

const mods: any[] = [
    IgrPropertyEditorPanelModule,
    IgrLegendModule,
    IgrCategoryChartModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private propertyEditor: IgrPropertyEditorPanel
    private propertyEditorRef(r: IgrPropertyEditorPanel) {
        this.propertyEditor = r;
        this.setState({});
    }
    private toolTipTypeEditor: IgrPropertyEditorPropertyDescription
    private legend: IgrLegend
    private legendRef(r: IgrLegend) {
        this.legend = r;
        this.setState({});
    }
    private chart: IgrCategoryChart
    private chartRef(r: IgrCategoryChart) {
        this.chart = r;
        this.setState({});
    }

    constructor(props: any) {
        super(props);

        this.propertyEditorRef = this.propertyEditorRef.bind(this);
        this.legendRef = this.legendRef.bind(this);
        this.chartRef = this.chartRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample">
            <div className="options vertical">
                <IgrPropertyEditorPanel
                    ref={this.propertyEditorRef}
                    componentRenderer={this.renderer}
                    target={this.chart}
                    descriptionType="CategoryChart"
                    isHorizontal="true"
                    isWrappingEnabled="true">
                    <IgrPropertyEditorPropertyDescription
                        propertyPath="ToolTipType"
                        name="ToolTipTypeEditor"
                        label="ToolTip Type: "
                        primitiveValue="Data">
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

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

            <div className="legend">
                <IgrLegend
                    ref={this.legendRef}>
                </IgrLegend>
            </div>

            <div className="container fill">
                <IgrCategoryChart
                    ref={this.chartRef}
                    chartType="Column"
                    legend={this.legend}
                    dataSource={this.highestGrossingMovies}
                    xAxisInterval="1"
                    yAxisTitle="Billions of U.S. Dollars"
                    yAxisTitleLeftMargin="10"
                    yAxisTitleRightMargin="5"
                    yAxisLabelLeftMargin="0"
                    isHorizontalZoomEnabled="false"
                    isVerticalZoomEnabled="false"
                    crosshairsSnapToData="true">
                </IgrCategoryChart>
            </div>
        </div>
        );
    }

    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;
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsxコピー

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

Edit in: Codesandbox

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

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

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

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

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

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

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrDataContext } from "@infragistics/igniteui-react-core";
import { IgrDataChartCoreModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";

IgrDataChartCoreModule.register();
IgrDataChartInteractivityModule.register();
IgrCategoryChartModule.register();

export default class CategoryChartTooltipTemplate extends React.Component<any, any> {
    public data: any[];
    public chart: IgrCategoryChart;

    constructor(props: any) {
        super(props);

        this.initData();

        this.onChartRef = this.onChartRef.bind(this);
        this.onSeriesAdded = this.onSeriesAdded.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options vertical">
                    <span className="legend-title">Highest Grossing Movie Franchises</span>
                </div>
                <div className="container fill" >
                    <IgrCategoryChart
                        width="100%"
                        height="100%"
                        ref={this.onChartRef}
                        dataSource={this.data}
                        chartType="Column"
                        isTransitionInEnabled="true"
                        xAxisInterval={1}
                        seriesAdded={this.onSeriesAdded} />
                </div>
            </div>
        );
    }

    public onSeriesAdded(sender: any, e: any) {
        console.log("onSeriesAdded");

        if (e.series) {
            console.log("onSeriesAdded series");
            e.series.tooltipTemplate = this.onTooltipRender;
        }
    }

    public onTooltipRender(context: any): any {

        console.log("onTooltipRender");
        const dataContext = context.dataContext as IgrDataContext;
        if (!dataContext) return null;

        const series = dataContext.series as any;
        if (!series) return null;

        const dataItem = dataContext.item as any;
        if (!dataItem) return null;

        return <div>
            <div className="tooltipTitle">{dataItem.Country} Production</div>
            <div className="tooltipBox">
                <div className="tooltipRow">
                    <div className="tooltipLbl">Franchise:</div>
                    <div className="tooltipVal">{dataItem.Franchise}</div>
                </div>
                <div className="tooltipRow">
                    <div className="tooltipLbl">Revenue of All Movies:</div>
                    <div className="tooltipVal">{dataItem.TotalRevenue}</div>
                </div>
                <div className="tooltipRow">
                    <div className="tooltipLbl">Highest Grossing Movie: $:</div>
                    <div className="tooltipVal">{dataItem.HighestGrossing}</div>
                </div>
            </div>
        </div>
    }

    public onChartRef(chart: IgrCategoryChart) {
        if (!chart) { return; }

        this.chart = chart;
        // this.chart.toolTipType = ToolTipType.None;
    }

    public initData() {
        this.data = [
            { Franchise: "Marvel Universe", 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 }
        ];
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CategoryChartTooltipTemplate/>);
tsxコピー

Edit in: Codesandbox

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

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

EXAMPLE

DATA

TSX

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 React, { ReactElement, version } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// importing axis' modules:
import { IgrNumericYAxis } from "@infragistics/igniteui-react-charts";
import { IgrCategoryXAxis } from "@infragistics/igniteui-react-charts";
// importing category series' modules:
import { IgrColumnSeries } from "@infragistics/igniteui-react-charts";
// importing data chart's modules:
import { IgrDataChart } from "@infragistics/igniteui-react-charts";
import { IgrDataChartCoreModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartCategoryModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";
import { IgrNumberAbbreviatorModule } from "@infragistics/igniteui-react-charts";

import { IgrChartMouseEventArgs } from "@infragistics/igniteui-react-charts";
import { SampleCategoryData } from './SampleCategoryData';
import { IgrDataContext } from "@infragistics/igniteui-react-core";

IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartInteractivityModule.register();
IgrNumberAbbreviatorModule.register();

export default class DataChartTooltipTemplate extends React.Component<any, any> {
    public data: any[];
    public chart: IgrDataChart;

    constructor(props: any) {
        super(props);

        this.onChartRef = this.onChartRef.bind(this);
        this.data = SampleCategoryData.create();
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" style={{ height: "calc(100% - 35px)" }} >
                    <IgrDataChart ref={this.onChartRef}
                        width="100%"
                        height="100%"
                        dataSource={this.data}
                        subtitle="Energy Source of Biggest Countries"
                        isHorizontalZoomEnabled={false}
                        isVerticalZoomEnabled={true} seriesMouseEnter={this.onSeriesMouseEnter}>
                        <IgrCategoryXAxis name="xAxis" label="Country" />
                        <IgrNumericYAxis name="yAxis"  abbreviateLargeNumbers="true" />
                        <IgrColumnSeries
                            name="series1"
                            title="Coal"
                            xAxisName="xAxis"
                            yAxisName="yAxis"
                            valueMemberPath="Coal"
                            showDefaultTooltip="false" />
                        <IgrColumnSeries
                            name="series2"
                            title="Hydro"
                            xAxisName="xAxis"
                            yAxisName="yAxis"
                            valueMemberPath="Hydro"
                            showDefaultTooltip="false" />
                            <IgrColumnSeries
                            name="series3"
                            title="Nuclear"
                            xAxisName="xAxis"
                            yAxisName="yAxis"
                            valueMemberPath="Nuclear"
                            showDefaultTooltip="false" />
                            <IgrColumnSeries
                            name="series4"
                            title="Gas"
                            xAxisName="xAxis"
                            yAxisName="yAxis"
                            valueMemberPath="Gas"
                            showDefaultTooltip="false" />
                            <IgrColumnSeries
                            name="series5"
                            title="Oil"
                            xAxisName="xAxis"
                            yAxisName="yAxis"
                            valueMemberPath="Oil"
                            showDefaultTooltip="false" />
                    </IgrDataChart>
                </div>
            </div>
        );
    }

    public onChartRef(chart: IgrDataChart) {
        if (!chart) { return; }

        this.chart = chart;
    }

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

    public onTooltipRender(context: any) {
        const dataContext = context.dataContext as IgrDataContext;
        if (!dataContext) return null;

        const series = dataContext.series as any;
        if (!series) return null;

        const dataItem = dataContext.item as any;
        if (!dataItem) return null;

        const coal = (dataItem.Coal / 1000000) + " M";
        const hydro = (dataItem.Hydro / 1000000) + " M";
        const nuclear = (dataItem.Nuclear / 1000000) + " M";
        const gas = (dataItem.Gas / 1000000) + " M";
        const oil = (dataItem.Oil / 1000000) + " M";

        return <div>
            <div className="tooltipTitle">{dataItem.Country} Production</div>
            <div className="tooltipBox">
                <div className="tooltipRow">
                    <div className="tooltipLbl">Coal:</div>
                    <div className="tooltipVal">{coal}</div>
                </div>
                <div className="tooltipRow">
                    <div className="tooltipLbl">Hydro:</div>
                    <div className="tooltipVal">{hydro}</div>
                </div>
                <div className="tooltipRow">
                    <div className="tooltipLbl">Nuclear:</div>
                    <div className="tooltipVal">{nuclear}</div>
                </div>
                <div className="tooltipRow">
                    <div className="tooltipLbl">Gas:</div>
                    <div className="tooltipVal">{gas}</div>
                </div>
                <div className="tooltipRow">
                    <div className="tooltipLbl">Oil:</div>
                    <div className="tooltipVal">{oil}</div>
                </div>
            </div>
        </div>
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DataChartTooltipTemplate/>);
tsxコピー

Edit in: Codesandbox

その他のリソース

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

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

API リファレンス

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

• toolTipType

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

• IgrDataToolTipLayer
• IgrItemToolTipLayer
• IgrCategoryToolTipLayer
• ShowDefaultToolTip