React 차트 툴팁

React 차트에서 툴팁은 바인딩된 데이터에 대한 세부 정보를 제공하며 최종 사용자가 데이터 포인트 위로 마우스를 가져가면 팝업으로 렌더링됩니다. 툴팁은 IgrCategoryChart, IgrFinancialChart 및 IgrDataChart 컨트롤에서 지원됩니다.

React 차트 툴팁 유형

React Chart는 toolTipType 속성을 설정하여 툴팁을 활성화할 수 있는 세 가지 유형의 툴팁을 제공합니다. 다음 예는 툴팁 유형을 변경하는 데 사용할 수 있는 콤보 상자가 있는 기둥 차트 보여줍니다.

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