React チャートのハイライト表示の例

以下の例は、React チャートで使用できるさまざまなハイライト表示オプションを示しています。

EXAMPLE

DATA

TSX

CSS

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

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            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 { IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from "@infragistics/igniteui-react-core";
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';

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

const mods: any[] = [
    IgrPropertyEditorPanelModule,
    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 highlightingModeEditor: IgrPropertyEditorPropertyDescription
    private highlightingBehaviorEditor: IgrPropertyEditorPropertyDescription
    private chart: IgrCategoryChart
    private chartRef(r: IgrCategoryChart) {
        this.chart = r;
        this.setState({});
    }

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

        this.propertyEditorRef = this.propertyEditorRef.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="HighlightingMode"
                        name="HighlightingModeEditor"
                        label="Highlighting Mode: "
                        primitiveValue="FadeOthersSpecific">
                    </IgrPropertyEditorPropertyDescription>
                    <IgrPropertyEditorPropertyDescription
                        propertyPath="HighlightingBehavior"
                        name="HighlightingBehaviorEditor"
                        label="Highlighting Behavior: "
                        primitiveValue="NearestItemsAndSeries">
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

            <div className="legend-title">
                Average Temperature in Sydney
            </div>

            <div className="container fill">
                <IgrCategoryChart
                    ref={this.chartRef}
                    chartType="Column"
                    computedPlotAreaMarginMode="Series"
                    isHorizontalZoomEnabled="false"
                    isVerticalZoomEnabled="false"
                    dataSource={this.temperatureAnnotatedData}
                    highlightingMode="FadeOthersSpecific"
                    highlightingBehavior="NearestItemsAndSeries"
                    yAxisMaximumValue="35"
                    yAxisLabelLocation="OutsideRight"
                    toolTipType="None"
                    isTransitionInEnabled="false">
                </IgrCategoryChart>
            </div>
        </div>
        );
    }

    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

React チャートのハイライト表示モードと動作

すべての React チャートは、さまざまなハイライト表示オプションをサポートしています。highlightingMode は、プロット領域に描画されたシリーズ/データ項目にマウスを合わせたときに明るくまたはフェードするように設定できます。highlightingBehavior は、ハイライト表示の効果をトリガーするために、直接または最も近いデータ項目に設定できます。ハイライト表示のモードと動作は、IgrCategoryChart、IgrFinancialChart、および IgrDataChart コントロールでサポートされており、ハイライト表示機能を使用するための同じ API を備えています。

以下の例は、highlightingMode React チャートを示しています。

EXAMPLE

DATA

TSX

CSS

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

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            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 { IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from "@infragistics/igniteui-react-core";
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';

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

const mods: any[] = [
    IgrPropertyEditorPanelModule,
    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 highlightingModeEditor: IgrPropertyEditorPropertyDescription
    private chart: IgrCategoryChart
    private chartRef(r: IgrCategoryChart) {
        this.chart = r;
        this.setState({});
    }

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

        this.propertyEditorRef = this.propertyEditorRef.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="HighlightingMode"
                        name="HighlightingModeEditor"
                        label="Highlighting Mode: "
                        primitiveValue="BrightenSpecific">
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

            <div className="container fill">
                <IgrCategoryChart
                    ref={this.chartRef}
                    chartType="Column"
                    computedPlotAreaMarginMode="Series"
                    isHorizontalZoomEnabled="false"
                    isVerticalZoomEnabled="false"
                    dataSource={this.temperatureAnnotatedData}
                    highlightingMode="BrightenSpecific"
                    toolTipType="None"
                    crosshairsDisplayMode="None"
                    isTransitionInEnabled="false">
                </IgrCategoryChart>
            </div>
        </div>
        );
    }

    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.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

以下の例は、highlightingBehavior React チャートを示しています。

EXAMPLE

DATA

TSX

CSS

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

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            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 { IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from "@infragistics/igniteui-react-core";
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';

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

const mods: any[] = [
    IgrPropertyEditorPanelModule,
    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 highlightingBehaviorEditor: IgrPropertyEditorPropertyDescription
    private chart: IgrCategoryChart
    private chartRef(r: IgrCategoryChart) {
        this.chart = r;
        this.setState({});
    }

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

        this.propertyEditorRef = this.propertyEditorRef.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="HighlightingBehavior"
                        name="HighlightingBehaviorEditor"
                        label="Highlighting Behavior: "
                        primitiveValue="DirectlyOver">
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

            <div className="container fill">
                <IgrCategoryChart
                    ref={this.chartRef}
                    chartType="Column"
                    computedPlotAreaMarginMode="Series"
                    isHorizontalZoomEnabled="false"
                    isVerticalZoomEnabled="false"
                    dataSource={this.temperatureAnnotatedData}
                    highlightingMode="Brighten"
                    highlightingBehavior="DirectlyOver"
                    toolTipType="None"
                    crosshairsDisplayMode="None"
                    isTransitionInEnabled="false">
                </IgrCategoryChart>
            </div>
        </div>
        );
    }

    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.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

React チャート凡例のハイライト表示

すべての React チャートは、凡例のハイライト表示をサポートしています。legendHighlightingMode を有効にすると、マウスが凡例マーカー項目にカーソルを合わせると、描画されたシリーズがプロット領域でハイライト表示されます。凡例のハイライト表示は、IgrCategoryChart、IgrFinancialChart、および IgrDataChart コントロールでサポートされており、ハイライト表示機能を使用するための同じ API を備えています。

以下の例は、凡例シリーズハイライト表示の React チャートを示しています。

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 { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';

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

export default class Sample extends React.Component<any, any> {
    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.legendRef = this.legendRef.bind(this);
        this.chartRef = this.chartRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample">

            <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}
                    legend={this.legend}
                    chartType="Column"
                    dataSource={this.highestGrossingMovies}
                    xAxisInterval="1"
                    yAxisTitle="Billions of U.S. Dollars"
                    yAxisTitleLeftMargin="10"
                    yAxisTitleRightMargin="5"
                    yAxisLabelLeftMargin="0"
                    isHorizontalZoomEnabled="false"
                    isVerticalZoomEnabled="false"
                    highlightingMode="Brighten"
                    legendHighlightingMode="MatchSeries"
                    isTransitionInEnabled="false">
                </IgrCategoryChart>
            </div>
        </div>
        );
    }

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

}

// 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 IgrCategoryChart は、データ項目にカーソルを合わせると 3 種類のハイライト表示を有効にできます。

1. シリーズ ハイライトは、ポインターがデータ ポイント上ある場合に、マーカーまたは列で表される単一のデータ ポイントをハイライトします。これは、isSeriesHighlightingEnabled プロパティを true に設定することで有効になります。

2. 項目ハイライトは、その位置に縞模様の図形を描画したりマーカーを描画したりすることでシリーズの項目をハイライト表示します。これは、isItemHighlightingEnabled プロパティを true に設定することで有効になります。

3. カテゴリ ハイライトはすべてのカテゴリ軸を対象にします。カーソル位置に最も近い軸領域を照らす図形を描画します。これは、isCategoryHighlightingEnabled プロパティを true に設定することで有効になります。

以下の例は、React チャートで使用できるさまざまなハイライト表示レイヤーを示しています。

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrLegendModule } from "@infragistics/igniteui-react-charts";
import { IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { IgrLegend } from "@infragistics/igniteui-react-charts";

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

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

    private chart: IgrCategoryChart
    private chartRef(r: IgrCategoryChart) {
        this.chart = r;
        this.setState({});
    }    
    private legend: IgrLegend
    private legendRef(r: IgrLegend) {
        this.legend = r;
        this.setState({});
    }

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

        this.chartRef = this.chartRef.bind(this);
        this.legendRef = this.legendRef.bind(this);
        this.onHighlightTargetChanged = this.onHighlightTargetChanged.bind(this);
        this.onHighlightingModeChanged = this.onHighlightingModeChanged.bind(this);
        this.onBehaviorModeChanged = this.onBehaviorModeChanged.bind(this);
        this.onLegendHighlightingModeChanged = this.onLegendHighlightingModeChanged.bind(this);

        this.state = {
            isCategoryHighlighting: false,
            isItemHighlighting: false,
            isSeriesHighlighting: true,
            highlightingMode: "Auto",
            highlightingBehavior: "Auto",
            legendHighlightingMode: "Auto"
        }
        this.initData();
    }

    public render(): JSX.Element {
        return (
        <div className="container sample" >
            <div className="options horizontal">
                <span className="options-label">Highlight Target: </span>
                <select id="highlightingTarget" onChange={this.onHighlightTargetChanged}>
                    <option>Series</option>
                    <option>Item</option>
                    <option>Category</option>
                    <option>None</option>
                </select>
                <span className="options-label">Mode: </span>
                <select id="highlightingMode" onChange={this.onHighlightingModeChanged}>
                    <option>Auto</option>
                    <option>Brighten</option>
                    <option>BrightenSpecific</option>
                    <option>FadeOthers</option>
                    <option>FadeOthersSpecific</option>
                    <option>None</option>
                </select>
                <span className="options-label">Behavior: </span>
                <select id="behaviorMode" onChange={this.onBehaviorModeChanged}>
                    <option>Auto</option>
                    <option>DirectlyOver</option>
                    <option>NearestItems</option>
                    <option>NearestItemsAndSeries</option>
                    <option>NearestItemsRetainMainShapes</option>
                </select>
                <span className="options-label">Legend: </span>
                <select id="legendHighlightingMode" onChange={this.onLegendHighlightingModeChanged}>
                    <option>Auto</option>
                    <option>MatchSeries</option>
                    <option>None</option>
                </select>
            </div>
            <span className="legend-title">
                Average Temperatures in the U.S. Cities
            </span>
            <div className="legend">
                <IgrLegend
                orientation="Horizontal"
                ref={this.legendRef}>
                </IgrLegend>
            </div>
            <div className="container fill" >
                <IgrCategoryChart
                    ref={this.chartRef}
                    dataSource={this.data}
                    legend={this.legend}
                    isCategoryHighlightingEnabled={this.state.isCategoryHighlighting}
                    isItemHighlightingEnabled={this.state.isItemHighlighting}
                    isSeriesHighlightingEnabled={this.state.isSeriesHighlighting}
                    highlightingMode={this.state.highlightingMode}
                    highlightingBehavior={this.state.highlightingBehavior}
                    legendHighlightingMode={this.state.legendHighlightingMode}
                    yAxisTitle="Temperatures in Celsius"
					yAxisMinimumValue={0}
                    xAxisInterval={1}>
                </IgrCategoryChart>
            </div>
        </div>
        );
    }

    public onHighlightTargetChanged(e: any) {
        let value = e.target.value as string;
        if(value == "Series") {
            this.setState({
                isItemHighlighting: false, 
                isSeriesHighlighting: true, 
                isCategoryHighlighting: false, 
                });
        }
        else if(value == "Item") {
            this.setState( {
                isItemHighlighting: true, 
                isSeriesHighlighting: false, 
                isCategoryHighlighting: false, 
            });
        }
        else if(value == "Category") {
            this.setState({
                isItemHighlighting: false, 
                isSeriesHighlighting: false, 
                isCategoryHighlighting: true, 
            });
        }
        else if(value=="None") {
            this.setState({
                isItemHighlighting: false, 
                isSeriesHighlighting: false, 
                isCategoryHighlighting: false, 
            });
        }
    }

    public onHighlightingModeChanged(e: any) {
        const val = e.target.value;
        this.setState({ highlightingMode: val});        
    }
    public onBehaviorModeChanged(e: any) {
        const val = e.target.value;
        this.setState({ highlightingBehavior: val});        
    }
    public onLegendHighlightingModeChanged(e: any) {
        const val = e.target.value;
        this.setState({ legendHighlightingMode: val});        
    }

    
    public initData() {
        const CityTemperatureData: any = [
            { Month: "January", NY: 10.6, LA: 28.3},
            { Month: "February", NY: 7.8, LA: 31.1},
            { Month: "March", NY: 12.2,   LA: 27.8},
            { Month: "April", NY: 11.7,  LA: 33.9},
            { Month: "May", NY: 19.4,    LA: 35.0},
            { Month: "June", NY: 23.3,    LA: 36.7},
            { Month: "July", NY: 27.2,    LA: 33.3},
            { Month: "August", NY: 25.6,  LA: 36.7},
            { Month: "September", NY: 22.8,  LA: 43.9},
            { Month: "October", NY: 17.8,    LA: 38.3 },
            { Month: "November", NY: 17.8,  LA: 32.8},
            { Month: "December", NY: 8.3, LA: 28.9},
        ];
        this.data = [ CityTemperatureData];
    }
}

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

Edit in: Codesandbox

その他のリソース

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

• チャート アニメーション
• チャート注釈
• チャート ツールチップ

API リファレンス

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

• highlightingMode
• highlightingBehavior
• LegendHighlightingBehavior
• isCategoryHighlightingEnabled
• isItemHighlightingEnabled
• isSeriesHighlightingEnabled
• IgrCategoryChart
• IgrDataChart
• IgrFinancialChart