React チャート注釈

React チャートのホバー操作と注釈は、シリーズコレクションに追加されるシリーズであるホバー操作レイヤーを介して実装されます。これらのレイヤーはカーソルの位置に依存します。これらの注釈レイヤーはそれぞれ、個別に使用することも、他のレイヤーと組み合わせて強力なホバー操作を提供することもできる、異なるホバー操作を提供します。

React 注釈の例

次の例は、React チャートで使用できる注釈レイヤーを示しています。チェックボックスをクリックして、各レイヤーのオンとオフを切り替えます。

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 { IgrLegend } from "@infragistics/igniteui-react-charts";
import { IgrLegendModule } from "@infragistics/igniteui-react-charts";

IgrCategoryChartModule.register();
IgrLegendModule.register();

export default class CategoryChartLineChartWithAnnotations extends React.Component<any, any> {
    public data: any[];
    public chart: IgrCategoryChart;
    public categoryData: any[];
    public includedProperties: string[] = ["Year", "USA"];

    constructor(props: any) {
        super(props);
        this.state = {
            calloutsVisible: true,
            crosshairsMode: "Both",
            crosshairsVisible: true,
            finalValuesVisible: true,
            markersTypes: "Automatic",
            markersVisible: true,
        };
        this.initData();
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <label className="options-label">Annotations: </label>
                    <label className="options-label"><input type="checkbox"
                    checked={this.state.crosshairsVisible}
                    onChange={this.onCrosshairsVisible}/> Crosshair </label>
                    <label className="options-label"><input type="checkbox"
                    checked={this.state.calloutsVisible}
                    onChange={this.onCalloutsVisible}/> Callouts </label>
                    <label className="options-label"><input type="checkbox"
                    checked={this.state.finalValuesVisible}
                    onChange={this.onFinalValuesVisible}/> Final Values </label>
                    <label className="options-label"><input type="checkbox"
                    checked={this.state.markersVisible}
                    onChange={this.onMarkersVisible}/> Markers </label>
                </div>

                <div className="container" style={{height: "calc(100% - 1.25rem)"}} >
                    <IgrCategoryChart
                        width="100%"
                        height="100%"
                        dataSource={this.data}
                        chartType="Line"
                        subtitle="Renewable Electricity Generated"
                        isHorizontalZoomEnabled={false}
                        isVerticalZoomEnabled={false}
                        yAxisTitle="TWh"
                        thickness={2}
                        crosshairsSnapToData={false}
                        crosshairsDisplayMode={this.state.crosshairsMode}
                        crosshairsAnnotationEnabled={this.state.crosshairsVisible}
                        finalValueAnnotationsVisible={this.state.finalValuesVisible}
                        yAxisLabelLocation="OutsideRight"
                        calloutsVisible={this.state.calloutsVisible}
                        calloutsYMemberPath="value"
                        calloutsXMemberPath="index"
                        calloutsLabelMemberPath="label"
                        markerTypes={this.state.markersTypes}
                        includedProperties={this.includedProperties}
						computedPlotAreaMarginMode="Series"/>
                </div>
            </div>
        );
    }

    public onCrosshairsVisible = (e: any) =>{
        const isVisible = e.target.checked;
        this.setState( {crosshairsVisible: isVisible} );
        if (isVisible) {
            this.setState( {crosshairsMode: "Both"} );
        }
        else {
            this.setState( {crosshairsMode: "None"} );
        }
    }
    public onCalloutsVisible = (e: any) =>{
        this.setState( {calloutsVisible: e.target.checked} );
    }
    public onFinalValuesVisible = (e: any) =>{
        this.setState( {finalValuesVisible: e.target.checked} );
    }
    public onMarkersVisible = (e: any) =>{
        const visible = e.target.checked;
        const markers = e.target.checked ? "Circle" : "None";
        this.setState( {markersTypes: markers, markersVisible: visible} );
    }

    public initData() {
        this.data = [
            { Year: "2009", USA: 19 },
            { Year: "2010", USA: 24 },
            { Year: "2011", USA: 28 },
            { Year: "2012", USA: 26 },
            { Year: "2013", USA: 38 },
            { Year: "2014", USA: 31 },
            { Year: "2015", USA: 19 },
            { Year: "2016", USA: 52 },
            { Year: "2017", USA: 50 },
            { Year: "2018", USA: 34 },
            { Year: "2019", USA: 38 },
        ];
        
        let idx: number = 0;

        for (const item of this.data) {
            item.index = idx;
            item.value = item.USA;
            item.label = item.USA + " TWh";
            idx++;
        }
    }
}

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

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

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

React 十字線レイヤー

IgrCrosshairLayer は、対象にするために構成される各シリーズの実際値で、異なるセットの線を描画する各シリーズと交差する十字線として描画されます。

十字線のタイプは次のとおりです:

Horizontal
Vertical
Both

チャートの十字線は、crosshairsSnapToData プロパティを true に設定することでデータポイントにスナップするように構成することもできます。そうしないと、十字線がデータポイント間で補完されます。注釈を有効にして軸に沿って十字線の値を表示できます。

デフォルトではチャートコントロールのすべてのシリーズをターゲットにするため、特定のシリーズを 1 つだけ表示するように十字線レイヤーを構成できます。これには、targetSeries プロパティを設定します。

デフォルトでは、十字線の色は交差するシリーズよりも軽い色になります。しかし、このデフォルト値は、十字線に使用される色を選択できるようにオーバーライドできます。これは、十字線レイヤーの brush プロパティを設定することによって行われます。

次の例は、単一のシリーズをターゲットにして、タイプを垂直に設定し、ブラシの色をスタイリングすることによって、十字線レイヤーを構成する方法を示しています。



export class SampleCategoryData {

    public static create(): any[] {
        const data: any[] = [];
        data.push({ "Year": "2009", "Europe": 31, "China": 21, "USA": 19 });
        data.push({ "Year": "2010", "Europe": 43, "China": 26, "USA": 24 });
        data.push({ "Year": "2011", "Europe": 66, "China": 29, "USA": 28 });
        data.push({ "Year": "2012", "Europe": 69, "China": 32, "USA": 26 });
        data.push({ "Year": "2013", "Europe": 58, "China": 47, "USA": 38 });
        data.push({ "Year": "2014", "Europe": 40, "China": 46, "USA": 31 });
        data.push({ "Year": "2015", "Europe": 78, "China": 50, "USA": 19 });
        data.push({ "Year": "2016", "Europe": 13, "China": 90, "USA": 52 });
        data.push({ "Year": "2017", "Europe": 78, "China": 132, "USA": 50 });
        data.push({ "Year": "2018", "Europe": 40, "China": 134, "USA": 34 });
        data.push({ "Year": "2019", "Europe": 80, "China": 96, "USA": 38 });
        return data;
    }
}
ts

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// importing axis' modules:
import { AxisLabelsLocation, IgrNumericYAxis } from "@infragistics/igniteui-react-charts";
import { IgrCategoryXAxis } from "@infragistics/igniteui-react-charts";
// importing category series' modules:
import { IgrLineSeries } from "@infragistics/igniteui-react-charts";
import { IgrCrosshairLayer } 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 { SampleCategoryData } from './SampleCategoryData';
import { Visibility } from "@infragistics/igniteui-react-core";

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

export default class DataChartCrosshairLayerStyling 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%"
                        subtitle="Renewable Energy Generated"
                        dataSource={this.data}>
                        <IgrCategoryXAxis name="xAxis" 
                            label="Year" 
                            dataSource={this.data}/>
                        <IgrNumericYAxis name="yAxis" 
                            title="TWh" 
                            labelLocation={AxisLabelsLocation.OutsideRight}/>
                        <IgrLineSeries name="series1"
                            xAxisName="xAxis"
                            yAxisName="yAxis"
                            valueMemberPath="USA"/>
                        <IgrCrosshairLayer name="CrosshairLayer" 
                            horizontalLineVisibility={Visibility.Collapsed} 
                            brush="DodgerBlue"/>
                    </IgrDataChart>
                </div>
            </div>
        );
    }

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

        this.chart = chart;
    }
}

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

React 最終値レイヤー

IgrDataChart コントロールの IgrFinalValueLayer は、シリーズに表示された最終値の軸に沿ったクイックビューをサポートします。

複数の最終値レイヤーを異なる設定で使用したい場合は、この注釈を設定して特定のシリーズをターゲットにすることができます。これには targetSeries プロパティを設定します。

次のプロパティを設定して、この注釈をカスタマイズすることもできます:

axisAnnotationBackground: このプロパティは注釈の背景色を選択するために使用されます。デフォルトはシリーズのブラシを使用します。
axisAnnotationTextColor: このプロパティは注釈のテキストの色のブラシを選択するために使用されます。
axisAnnotationOutline: このプロパティは注釈のアウトライン色を選択するために使用されます。

次の例は、上記のプロパティを設定して、最終的な値レイヤーの注釈のスタイルを設定する方法を示しています。



export class SampleCategoryData {

    public static create(): any[] {
        const data: any[] = [];
        data.push({ "Year": "2009", "Europe": 31, "China": 21, "USA": 19 });
        data.push({ "Year": "2010", "Europe": 43, "China": 26, "USA": 24 });
        data.push({ "Year": "2011", "Europe": 66, "China": 29, "USA": 28 });
        data.push({ "Year": "2012", "Europe": 69, "China": 32, "USA": 26 });
        data.push({ "Year": "2013", "Europe": 58, "China": 47, "USA": 38 });
        data.push({ "Year": "2014", "Europe": 40, "China": 46, "USA": 31 });
        data.push({ "Year": "2015", "Europe": 78, "China": 50, "USA": 19 });
        data.push({ "Year": "2016", "Europe": 13, "China": 90, "USA": 52 });
        data.push({ "Year": "2017", "Europe": 78, "China": 132, "USA": 50 });
        data.push({ "Year": "2018", "Europe": 40, "China": 134, "USA": 34 });
        data.push({ "Year": "2019", "Europe": 80, "China": 96, "USA": 38 });
        return data;
    }
}
ts

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// importing axis' modules:
import { AxisLabelsLocation, IgrNumericYAxis } from "@infragistics/igniteui-react-charts";
import { IgrCategoryXAxis } from "@infragistics/igniteui-react-charts";
// importing category series' modules:
import { IgrLineSeries } from "@infragistics/igniteui-react-charts";
import { IgrFinalValueLayer} 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 { IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrFinalValueLayerModule } from "@infragistics/igniteui-react-charts"

import { SampleCategoryData } from './SampleCategoryData';

IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartAnnotationModule.register();
IgrFinalValueLayerModule.register();

export default class DataChartFinalValueLayerStyling 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%"
                        subtitle="Renewable Energy Generated"
                        dataSource={this.data}>
                        <IgrCategoryXAxis name="xAxis" 
                            label="Year" 
                            dataSource={this.data}/>
                        <IgrNumericYAxis name="yAxis" 
                            title="TWh" 
                            labelLocation={AxisLabelsLocation.OutsideRight}/>
                        <IgrLineSeries name="series1"
                            xAxisName="xAxis"
                            yAxisName="yAxis"
                            valueMemberPath="USA"/>
                        <IgrFinalValueLayer name="FinalValueLayer" 
                            axisAnnotationBackground="Orange" 
                            axisAnnotationTextColor="Black" 
                            axisAnnotationOutline="Black"/>
                    </IgrDataChart>
                </div>
            </div>
        );
    }

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

        this.chart = chart;
    }
}

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

 <IgrCategoryChart
    dataSource={this.state.data}
    finalValueAnnotationsVisible={true} />
tsx

React コールアウトレイヤー

IgrCalloutLayer はチャートコントロール既存または新しいデータの注釈を表示します。注釈は、データソース内の指定されたデータ値の横に表示されます。

コールアウト注釈を使用して、メモやデータポイントに関する特定の詳細など、ユーザーに追加情報を表示します。

複数のコールアウトレイヤーを異なる設定で使用する場合は、コールアウトを設定して特定のシリーズをターゲットにできます。これには targetSeries プロパティを設定します。

次のプロパティを設定して、この注釈をカスタマイズすることもできます:

calloutLeaderBrush: このプロパティは、レイヤーのコールアウトのリーダー線のブラシを選択するために使用されます。
calloutOutline: このプロパティは注釈のアウトライン色を選択するために使用されます。
calloutBackground: このプロパティは注釈の背景色を選択するために使用されます。デフォルトはシリーズのブラシを使用します。
calloutTextColor: このプロパティは注釈のテキストの色のブラシを選択するために使用されます。
calloutStrokeThickness: このプロパティは、コールアウトバッキングの厚さを選択するために使用されます。
calloutCornerRadius: このプロパティは、コールアウトのコーナーをカーブさせるために使用されます。
allowedPositions: このプロパティは、コールアウトレイヤーが使用できる位置を選択するために使用されます。例: 上、下

次の例は、上記のプロパティを設定して、コールアウトレイヤーの注釈のスタイルを設定する方法を示しています。

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

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrAnnotationLayerProxyModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrLineSeries, IgrCalloutLayer } from "@infragistics/igniteui-react-charts";
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';

const mods: any[] = [
    IgrDataChartCoreModule,
    IgrDataChartCategoryModule,
    IgrDataChartAnnotationModule,
    IgrDataChartInteractivityModule,
    IgrAnnotationLayerProxyModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private chart: IgrDataChart
    private chartRef(r: IgrDataChart) {
        this.chart = r;
        this.setState({});
    }
    private xAxis: IgrCategoryXAxis
    private yAxis: IgrNumericYAxis
    private lineSeries1: IgrLineSeries
    private calloutLayer1: IgrCalloutLayer

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

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

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

            <div className="legend-title">
                Renewable Electricity Generated
            </div>

            <div className="container fill">
                <IgrDataChart
                    shouldAutoExpandMarginForInitialLabels="true"
                    computedPlotAreaMarginMode="Series"
                    ref={this.chartRef}>
                    <IgrCategoryXAxis
                        name="xAxis"
                        dataSource={this.countryRenewableElectricity}
                        label="year">
                    </IgrCategoryXAxis>
                    <IgrNumericYAxis
                        name="yAxis"
                        title="TWh"
                        labelLocation="OutsideRight">
                    </IgrNumericYAxis>
                    <IgrLineSeries
                        name="lineSeries1"
                        xAxisName="xAxis"
                        yAxisName="yAxis"
                        dataSource={this.countryRenewableElectricity}
                        valueMemberPath="america"
                        brush="rgba(137, 97, 169, 1)"
                        markerOutline="rgba(137, 97, 169, 1)"
                        shouldHideAutoCallouts="false">
                    </IgrLineSeries>
                    <IgrCalloutLayer
                        name="CalloutLayer1"
                        isAutoCalloutBehaviorEnabled="true"
                        calloutLeaderBrush="rgba(137, 97, 169, 1)"
                        calloutOutline="rgba(137, 97, 169, 1)"
                        calloutBackground="white"
                        calloutTextColor="rgba(137, 97, 169, 1)"
                        calloutStrokeThickness="1"
                        calloutCollisionMode="Greedy">
                    </IgrCalloutLayer>
                </IgrDataChart>
            </div>
        </div>
        );
    }

    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

}

// 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

 <IgrCategoryChart
    dataSource={this.state.data}
    calloutsVisible={true}
    calloutsDataSource={this.state.calloutData}
    calloutsXMemberPath="index"
    calloutsYMemberPath="value"
    calloutsLabelMemberPath="info" />
tsx

API リファレンス

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