React チャート同期化

$ ProductName$ データチャートを使用すると、複数のチャート間のズーム、パン、および十字線イベントの調整に関して同期をとることができます。これは、データソースが軸に関して似ているか同じであると仮定して、複数のチャートの同じ領域を視覚化するのに役立ちます。

React チャート同期化の例

このサンプルは、2 つの React データチャートの同期を示しています。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// data chart's elements for category series:
import { IgrNumericYAxis } from "@infragistics/igniteui-react-charts";
import { IgrCategoryXAxis } from "@infragistics/igniteui-react-charts";
import { IgrLineSeries } from "@infragistics/igniteui-react-charts";
// 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";
// legend's modules:
import { IgrLegend } from "@infragistics/igniteui-react-charts";
import { IgrLegendModule } from "@infragistics/igniteui-react-charts";

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

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

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

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

        this.initData();
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" style={{height: "100%"}}>
                    <IgrDataChart ref={this.onChartRef}
                        width="100%"
                        height="50%"
                        dataSource={this.data}
                        isHorizontalZoomEnabled={true}
                        isVerticalZoomEnabled={true}>

                        <IgrCategoryXAxis name="xAxis" label="Year" />
                        <IgrNumericYAxis name="yAxis" />

                        <IgrLineSeries name="series1" title="USA"
                            valueMemberPath="USA"
                            xAxisName="xAxis"
                            yAxisName="yAxis" />
                        <IgrLineSeries name="series2" title="China"
                            valueMemberPath="China"
                            xAxisName="xAxis"
                            yAxisName="yAxis" />
                        <IgrLineSeries name="series3" title="Russia"
                            valueMemberPath="Russia"
                            xAxisName="xAxis"
                            yAxisName="yAxis" />
                    </IgrDataChart>

                    <IgrDataChart ref={this.onChartRef}
                        width="100%"
                        height="50%"
                        dataSource={this.data}
                        isHorizontalZoomEnabled={true}
                        isVerticalZoomEnabled={true} >

                        <IgrCategoryXAxis name="xAxis" label="Year" />
                        <IgrNumericYAxis name="yAxis" />

                        <IgrLineSeries name="series1" title="USA"
                            valueMemberPath="USA"
                            xAxisName="xAxis"
                            yAxisName="yAxis" />
                        <IgrLineSeries name="series2" title="China"
                            valueMemberPath="China"
                            xAxisName="xAxis"
                            yAxisName="yAxis" />
                        <IgrLineSeries name="series3" title="Russia"
                            valueMemberPath="Russia"
                            xAxisName="xAxis"
                            yAxisName="yAxis" />
                    </IgrDataChart>
                </div>
            </div>
        );
    }

    public initData() {
        this.data = [
            { Year: "1996", USA: 148, China: 110, Russia: 95 },
            { Year: "2000", USA: 142, China: 115, Russia: 91 },
            { Year: "2004", USA: 134, China: 121, Russia: 86 },
            { Year: "2008", USA: 131, China: 129, Russia: 65 },
            { Year: "2012", USA: 135, China: 115, Russia: 77 },
            { Year: "2016", USA: 146, China: 112, Russia: 88 }
        ];
    }

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

        chart.syncChannel = "ChannelA";
        chart.synchronizeHorizontally = true;
        chart.synchronizeVertically = true;

    }
}

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

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

チャート同期化のプロパティ

チャートの同期にはデフォルトで 4 つのオプションがあり、水平方向のみ、垂直方向のみ、その両方を同期、あるいは同期なしを選択することもできます。

チャートのセットを同期する場合は、それらに SyncChannel プロパティに同じ名前を割り当ててから、SynchronizeHorizontally と SynchronizeVertically プロパティを対応するブール値に設定して、チャートを水平または垂直に同期するかどうかを指定できます。

垂直または水平に同期するには、isHorizontalZoomEnabled または isVerticalZoomEnabled プロパティをそれぞれ true に設定する必要があります。他のチャートに依存している同期チャートは、このプロパティ設定に関係なく、ズームできます。

API リファレンス

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

isHorizontalZoomEnabled
isVerticalZoomEnabled
SyncChannel
SynchronizeHorizontally
SynchronizeVertically
IgrDataChart