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;
}
}