React 凡例

凡例は、エンドユーザーが React データ チャート コンポネントにプロットされたデータに関連するコンテキスト情報を使用してデータ チャートシリーズの表示を識別するのに役立ちます。プロットエリアに表示されるデータを理解しやすくするために、ほとんどのデータ チャートには凡例が少なくとも 1 つ必要ですが、必須ではなく、データ チャートはデフォルトで凡例なしで表示できます。

React 凡例の例

凡例概要

デフォルトでは、React データ チャート コンポネントはデータ チャート内のどのシリーズの凡例も表示しません。複数のシリーズに共通の凡例を表示したい場合は、凡例 オブジェクトをアプリケーションに追加してから、それをデータ チャートの Legend プロパティに設定する必要があります。

さらに、各シリーズオブジェクトの chartTitle プロパティを設定しない場合、凡例にデフォルトのシリーズ タイトルが使用されます。

次のコード スニペットは、React データ チャート コンポネントで凡例を使用する方法を示しています。

public render() {
    return (
        <div>
            <div>
                <IgrLegend ref={this.onLegendRef}
                    orientation="Horizontal" />
            </div>
            <IgrDataChart dataSource={this.data} ref={this.onChartRef} width="100%" height="400px">
                <IgrCategoryXAxis name="xAxis" label="Country" />
                <IgrNumericYAxis name="yAxis" minimumValue={0}  />

                <IgrColumnSeries name="series1" title="Coal" xAxisName="xAxis"
                    yAxisName="yAxis" valueMemberPath="Coal" />
                <IgrColumnSeries name="series2" title="Hydro" xAxisName="xAxis"
                    yAxisName="yAxis" valueMemberPath="Hydro" />
                <IgrColumnSeries name="series3" title="Nuclear" xAxisName="xAxis"
                    yAxisName="yAxis" valueMemberPath="Nuclear" />
                <IgrColumnSeries name="series4" title="Gas" xAxisName="xAxis"
                    yAxisName="yAxis" valueMemberPath="Gas" />
                <IgrColumnSeries name="series5" title="Oil" xAxisName="xAxis"
                    yAxisName="yAxis" valueMemberPath="Oil" />
            </IgrDataChart>
        </div>
    );
}

public onChartRef(chart: IgrDataChart) {
    this.chart = chart;
    if (this.legend) {
        this.chart.legend = this.legend;
    }
}

public onLegendRef(legend: IgrLegend) {
    this.legend = legend;
    if (this.chart) {
        this.chart.legend = this.legend;
    }
}