React 軸レイアウト

すべての Ignite UI for React チャートには、位置などの多くの軸レイアウト オプションを構成するオプションが含まれているほか、シリーズ間で軸を共有したり、同じチャートに複数の軸を含めることができます。これらの機能は、以下の例で示されています。

次の例は、IgrCategoryChart および IgrFinancialChart コントロールに適用されます。

軸位置の例

すべての軸に対して、チャートのプロット領域に関連して軸の位置を指定できます。React チャートの xAxisLabelLocation プロパティを使用すると、x 軸の線とそのラベルをプロット領域の上または下に配置できます。同様に、yAxisLabelLocation プロパティを使用して、プロット領域の左側または右側に y 軸を配置できます。

以下の例は、2009 年以降に生成された再生可能電力量を折れ線チャートで示しています。チャートのプロット領域の内側または外側の左側または右側にラベルを配置したときに軸がどのように見えるかを視覚化できるように、yAxisLabelLocation を構成できるドロップダウンがあります。

EXAMPLE

DATA

TSX

CSS

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 { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from "@infragistics/igniteui-react-core";
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';

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 legend: IgrLegend
    private legendRef(r: IgrLegend) {
        this.legend = r;
        this.setState({});
    }
    private propertyEditorPanel1: IgrPropertyEditorPanel
    private propertyEditorPanel1Ref(r: IgrPropertyEditorPanel) {
        this.propertyEditorPanel1 = r;
        this.setState({});
    }
    private yAxisLabelLocation: IgrPropertyEditorPropertyDescription
    private chart: IgrCategoryChart
    private chartRef(r: IgrCategoryChart) {
        this.chart = r;
        this.setState({});
    }

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

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

    public render(): JSX.Element {
        return (
        <div className="container sample">
            <div className="options vertical">
                <IgrPropertyEditorPanel
                    componentRenderer={this.renderer}
                    target={this.chart}
                    descriptionType="CategoryChart"
                    isHorizontal="true"
                    isWrappingEnabled="false"
                    ref={this.propertyEditorPanel1Ref}>
                    <IgrPropertyEditorPropertyDescription
                        propertyPath="YAxisLabelLocation"
                        name="YAxisLabelLocation"
                        label="Y Axis - Label Location"
                        primitiveValue="OutsideRight">
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

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

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

            <div className="container fill">
                <IgrCategoryChart
                    ref={this.chartRef}
                    computedPlotAreaMarginMode="Series"
                    dataSource={this.countryRenewableElectricity}
                    includedProperties={["year", "europe", "china", "america"]}
                    legend={this.legend}
                    chartType="Line"
                    yAxisTitle="Labels Location"
                    isHorizontalZoomEnabled="false"
                    isVerticalZoomEnabled="false"
                    xAxisInterval="1"
                    yAxisLabelLocation="OutsideRight">
                </IgrCategoryChart>
            </div>
        </div>
        );
    }

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

    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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

軸の高度なシナリオ

より高度な軸レイアウト シナリオでは、React データ チャートを使用して軸を共有したり、同じプロット領域に複数の y 軸や x 軸を追加したり、特定の値で軸を交差させたりすることができます。次の例は、IgrDataChart のこれらの機能の使用方法を示しています。

軸共有の例

React IgrDataChart の同じプロット領域に複数の軸を共有して追加できます。IgrTimeXAxis を共有し、複数の IgrNumericYAxis を追加して、さまざまな値 (株価や株取引量など) を持つ多くのデータ ソースをプロットするのが一般的なシナリオです。

以下の例は、株価チャートと縦棒チャートをプロットした株価および株取引量チャートを示しています。この場合、左側の Y 軸は縦棒チャートで使用され、右側の Y 軸は株価チャート、X 軸は 2 つの間で共有されます。

EXAMPLE

DATA

TSX

export class SharedAxisFinancialData {

    public static create(items?: number): any[] {
        // initial values
        let v = 10000;
        let o = 500;
        let h = Math.round(o + (Math.random() * 5));
        let l = Math.round(o - (Math.random() * 5));
        let c = Math.round(l + (Math.random() * (h - l)));

        if (items === undefined) {
            items = 400;
        }

        const today = new Date();
        const end = new Date(today.getFullYear(), today.getMonth(), today.getDay());
        let time = this.addDays(end, -items);

        const data: any[] = [];
        for (let i = 0; i < items; i++) {
            const date = time.toDateString();
            const label = this.getShortDate(time, false);
            // adding new data item
            data.push({"Time": time, "Date": date, "Label": label, "Close": c, "Open": o, "High": h, "Low": l, "Volume": v});
            // generating new values
            const mod = Math.random() - 0.49;
            o = Math.round(o + (mod * 20));
            o = Math.max(o, 500);
            o = Math.min(o, 675);

            v = Math.round(v + (mod * 500));
            h = Math.round(o + (Math.random() * 5));
            l = Math.round(o - (Math.random() * 5));
            c = Math.round(l + (Math.random() * (h - l)));
            time = this.addDays(time, 1);
        }
        return data;
    }

    public static addDays(dt: Date, days: number): Date {
        return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
    }

    public static getShortDate(dt: Date, showYear: boolean): string {
        const months = [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];
        const ind = dt.getMonth();
        const day = dt.getDay() + 1;
        let label = months[ind] + " " + day;
        if (showYear) {
            label += " " +  dt.getFullYear();
        }
        return label;
    }
}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { SharedAxisFinancialData } from './SharedAxisFinancialData';
// axis' modules:
import { IgrNumericYAxis } from "@infragistics/igniteui-react-charts";
import { IgrCategoryXAxis } from "@infragistics/igniteui-react-charts";
// series' modules:
import { IgrFinancialPriceSeries } from "@infragistics/igniteui-react-charts";
import { IgrColumnSeries } from "@infragistics/igniteui-react-charts";
// data chart's modules:
import { IgrDataChart } from "@infragistics/igniteui-react-charts";
import { IgrDataChartCoreModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";
import { IgrNumberAbbreviatorModule } from "@infragistics/igniteui-react-charts";

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

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

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

        this.data = SharedAxisFinancialData.create();
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container">
                    <IgrDataChart
                        width="100%"
                        height="100%"
                        subtitle="Stock Prices and Trade Volume"
                        subtitleTopMargin="10"
                        dataSource={this.data}
                        isHorizontalZoomEnabled={true}
                        isVerticalZoomEnabled={true} >

                        <IgrCategoryXAxis name="xAxisShared" label="Label" gap="0.75"/>
                        <IgrNumericYAxis  name="yAxisRight" labelLocation="OutsideRight"
                        minimumValue={400} title="Stock Price ($)"
                        maximumValue={700}
                        />
                        <IgrNumericYAxis name="yAxisLeft" labelLocation="OutsideLeft"
                        minimumValue={5000} title="Trade Volume"
                        maximumValue={45000}
                        majorStrokeThickness={0}
                        abbreviateLargeNumbers={true}/>

                        <IgrColumnSeries
                        name="series2"
                        xAxisName="xAxisShared"
                        yAxisName="yAxisLeft"
                        valueMemberPath="Volume"
                        showDefaultTooltip="true"
                        title="Trade Volume" />

                        <IgrFinancialPriceSeries
                        name="series1"
                        xAxisName="xAxisShared"
                        yAxisName="yAxisRight"
                        displayType="Candlestick"
                        highMemberPath="High"
                        lowMemberPath="Low"
                        closeMemberPath="Close"
                        openMemberPath="Open"
                        volumeMemberPath="Volume"
                        showDefaultTooltip="true"
                        title="Stock Price" />

                    </IgrDataChart>
                </div>
            </div>
        );
    }
}

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

Edit in: Codesandbox

軸交差の例

軸をプロット領域の外側に配置することに加えて、React IgrDataChart は、軸をプロット領域の内側に配置し、特定の値で交差させるオプションも提供します。たとえば、x 軸と y 軸の両方で crossingAxis プロパティと crossingValue プロパティを設定して、原点が (0、0) で 交差するように軸線と軸ラベルを描画することにより、三角関数チャートを作成できます。

以下の例は、散布スプライン チャートで表される Sin と Cos 波を示します。X 軸と Y 軸は (0、0) 原点で交差します。

EXAMPLE

DATA

TSX

export class SampleFinancialData {

    public static create(items?: number): any[] {
        // initial values
        let v = 10000;
        let o = 500;
        let h = Math.round(o + (Math.random() * 5));
        let l = Math.round(o - (Math.random() * 5));
        let c = Math.round(l + (Math.random() * (h - l)));

        if (items === undefined) {
            items = 200;
        }

        const today = new Date();
        const end = new Date(today.getFullYear(), 11, 1);
        let time = this.addDays(end, -items);

        const data: any[] = [];
        for (let i = 0; i < items; i++) {
            const date = time.toDateString();
            const label = this.getShortDate(time, false);
            // adding new data item
            data.push({"Time": time, "Date": date, "Label": label, "Close": c, "Open": o, "High": h, "Low": l, "Volume": v});
            // generating new values
            const mod = Math.random() - 0.45;
            o = Math.round(o + (mod * 5 * 2));
            v = Math.round(v + (mod * 5 * 100));
            h = Math.round(o + (Math.random() * 5));
            l = Math.round(o - (Math.random() * 5));
            c = Math.round(l + (Math.random() * (h - l)));
            time = this.addDays(time, 1);
        }
        return data;
    }

    public static addDays(dt: Date, days: number): Date {
        return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
    }

    public static getShortDate(dt: Date, showYear: boolean): string {
        const months = [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];
        const ind = dt.getMonth();
        const day = dt.getDay() + 1;
        let label = months[ind] + " " + day;
        if (showYear) {
            label += " " +  dt.getFullYear();
        }
        return label;
    }
}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDataChartCoreModule, IgrDataChartInteractivityModule, IgrDataChartScatterCoreModule, IgrDataChartScatterModule,
         IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrScatterSplineSeries } from "@infragistics/igniteui-react-charts";

IgrDataChartCoreModule.register();
IgrDataChartScatterCoreModule.register();
IgrDataChartScatterModule.register();
IgrDataChartInteractivityModule.register();

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

    constructor(props: any) {
        super(props);        
        
        this.onXAxisCrossValueChange = this.onXAxisCrossValueChange.bind(this);
        this.onYAxisCrossValueChange = this.onYAxisCrossValueChange.bind(this);

        this.state = {
            xAxisCrossValue: 0,
            yAxisCrossValue: 0
        }
        
        this.initData();
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <label className="option-label">X-Axis Crossing Value: </label>
                    <label className="options-value">{this.state.xAxisCrossValue}</label>
                    <input className="options-slider" type="range" min={-360} max={360} step={10} value={this.state.xAxisCrossValue}
                           onChange={this.onXAxisCrossValueChange}/>
                    <label className="option-label">Y-Axis Crossing Value: </label>
                    <label className="options-value">{this.state.yAxisCrossValue}</label>
                    <input className="options-slider" type="range" min={-1.25} max={1.25} step={0.125} value={this.state.yAxisCrossValue} 
                           onChange={this.onYAxisCrossValueChange}/>
                </div>
                <div className="container">
                    <IgrDataChart
                        width="100%"
                        height="100%"
                        dataSource={this.data}
                        isHorizontalZoomEnabled={true}
                        isVerticalZoomEnabled={true}
                        plotAreaMarginBottom={60}
                        plotAreaMarginTop={60}
                        plotAreaMarginLeft={30}
                        plotAreaMarginRight={30}>

                        <IgrNumericXAxis name="xAxis" interval={40} minimumValue={-360} maximumValue={360} labelLocation="InsideBottom"
                            labelTopMargin={10} crossingAxisName="yAxis" crossingValue={this.state.yAxisCrossValue} strokeThickness={1} stroke="Black" />

                        <IgrNumericYAxis name="yAxis" minimumValue={-1.25} maximumValue={1.25} interval={0.25} labelLocation="InsideLeft"
                            labelRightMargin={10} crossingAxisName="xAxis" crossingValue={this.state.xAxisCrossValue} strokeThickness={1} stroke="Black" />

                        <IgrScatterSplineSeries name="series1" xAxisName="xAxis" yAxisName="yAxis" markerType="Circle" xMemberPath="X" yMemberPath="sinValue" />
                        <IgrScatterSplineSeries name="series2" xAxisName="xAxis" yAxisName="yAxis" markerType="Circle" xMemberPath="X" yMemberPath="cosValue" />
                    </IgrDataChart>
                </div>
            </div>
        );
    }

    public initData() {
        for (let i = -360; i <= 360; i += 10) {
            const radians = (i * Math.PI) / 180;
            const sin = Math.sin(radians);
            const cos = Math.cos(radians);
            this.data.push({ X: i, sinValue: sin, cosValue: cos });
        }
    }

    public onXAxisCrossValueChange(e: any){
        this.setState({ xAxisCrossValue: e.target.value});
    }

    public onYAxisCrossValueChange(e: any){
        this.setState({ yAxisCrossValue: e.target.value});
    }
}

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

tsxコピー

Edit in: Codesandbox

その他のリソース

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

• 軸グリッド線
• 軸オプション

API リファレンス

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

IgrDataChart	IgrCategoryChart
Axes ➔ IgrNumericYAxis ➔ crossingAxis	なし
Axes ➔ IgrNumericYAxis ➔ crossingValue	なし
Axes ➔ IgrNumericXAxis ➔ isInverted	xAxisInverted
Axes ➔ IgrNumericYAxis ➔ isInverted	yAxisInverted
Axes ➔ IgrNumericYAxis ➔ LabelLocation	yAxisLabelLocation
Axes ➔ IgrNumericXAxis ➔ LabelLocation	xAxisLabelLocation
Axes ➔ IgrNumericYAxis ➔ LabelHorizontalAlignment	yAxisLabelHorizontalAlignment
Axes ➔ IgrNumericXAxis ➔ LabelVerticalAlignment	xAxisLabelVerticalAlignment
Axes ➔ IgrNumericYAxis ➔ LabelVisibility	yAxisLabelVisibility
Axes ➔ IgrNumericXAxis ➔ LabelVisibility	xAxisLabelVisibility