React 軸共有と複数軸

React データ チャート コンポーネントの同じプロット領域に複数の軸を共有して追加できます。すべての軸に対して、チャートプロット領域に関連して位置を指定できます。広範囲の値 (株価や株取引量など) を持つ多くのデータソースをプロットする場合は、複数の軸を使用するのが一般的なシナリオです。

React 軸共有と複数軸の例

Edit on CodeSandbox

コード例

このコードは、2 つのシリーズ間で共有される 2 つの IgrNumericYAxis と 1 つの IgrCategoryXAxis で Ignite UI for React データ チャートを作成する方法を示します。

 <IgrDataChart >

    {/* axes */}
    <IgrCategoryXAxis name="sharedXAxis" label="Date"/>
    <IgrNumericYAxis  name="rightYAxis" labelLocation="OutsideRight" />
    <IgrNumericYAxis  name="leftYAxis" labelLocation="OutsideLeft" />

    {/* series */}
    <IgrFinancialPriceSeries
    name="series2"
    xAxisName="sharedXAxis"
    yAxisName="rightYAxis"
    displayType="Candlestick"
    lowMemberPath="Low"
    highMemberPath="High"
    openMemberPath="Open"
    closeMemberPath="Close"
    volumeMemberPath="Volume" />

    <IgrMoneyFlowIndexIndicator
    name="series3"
    xAxisName="sharedXAxis"
    yAxisName="leftYAxis"
    displayType="Column"
    lowMemberPath="Low"
    highMemberPath="High"
    openMemberPath="Open"
    closeMemberPath="Close"
    volumeMemberPath="Volume" />

 </IgrDataChart>
const rightYAxis = new IgrNumericYAxis({ name: "rightYAxis" });
rightYAxis.labelLocation = "OutsideRight";
const leftYAxis = new IgrNumericYAxis({ name: "leftYAxis" });
leftYAxis.labelLocation = "OutsideLeft";
const sharedXAxis = new IgrCategoryXAxis({ name: "sharedXAxis" });
sharedXAxis.label = "Date";

const series1 = new IgrFinancialPriceSeries({ name: "series1" });
series1.lowMemberPath = "Low";
series1.highMemberPath = "High";
series1.openMemberPath = "Open";
series1.closeMemberPath = "High";
series1.volumeMemberPath = "Volume";
series1.xAxisName = "sharedXAxis";
series1.yAxisName = "rightYAxis";

const series2 = new IgrMoneyFlowIndexIndicator({ name: "series2" });
series2.lowMemberPath = "Low";
series2.highMemberPath = "High";
series2.openMemberPath = "Open";
series2.closeMemberPath = "High";
series2.volumeMemberPath = "Volume";
series2.xAxisName = "sharedXAxis";
series2.yAxisName = "leftYAxis";

this.chart = new IgrDataChart({ name: "chart" });
this.chart.dataSource = SampleFinancialData.create();
this.chart.axes.add(leftYAxis);
this.chart.axes.add(rightYAxis);
this.chart.axes.add(sharedXAxis);
this.chart.series.add(series1);
this.chart.series.add(series2);

その他のリソース