Blazor 凡例
凡例は、エンドユーザーが Blazor データ チャート コンポネントにプロットされたデータに関連するコンテキスト情報を使用してデータ チャートシリーズの表示を識別するのに役立ちます。プロットエリアに表示されるデータを理解しやすくするために、ほとんどのデータ チャートには凡例が少なくとも 1 つ必要ですが、必須ではなく、データ チャートはデフォルトで凡例なしで表示できます。
Blazor 凡例の例
凡例概要
デフォルトでは、Blazor データ チャート コンポネントはデータ チャート内のどのシリーズの凡例も表示しません。複数のシリーズに共通の凡例を表示したい場合は、凡例 オブジェクトをアプリケーションに追加してから、それをデータ チャートの Legend プロパティに設定する必要があります。
さらに、各シリーズオブジェクトの ChartTitle
プロパティを設定しない場合、凡例にデフォルトのシリーズ タイトルが使用されます。
次のコード スニペットは、Blazor データ チャート コンポネントで凡例を使用する方法を示しています。
<div class="igContainer">
<div class="igOptions-horizontal">
<span class="igLegend-title">Legend: </span>
<div class="igLegend">
<Legend @ref="LegendRef" Orientation="LegendOrientation.Horizontal" />
</div>
</div>
<div class="igComponent">
<DataChart Height="500px" Legend="@LegendRef" Width="700px" ChartTitle>
<CategoryXAxis Name="xAxis" Label="Country" DataSource="@data"/>
<NumericYAxis Name="yAxis" MinimumValue="0" />
<ColumnSeries
Name="series1"
XAxisName="xAxis"
YAxisName="yAxis"
ValueMemberPath="Coal"
DataSource="@data" />
<ColumnSeries
Name="series1"
XAxisName="xAxis"
YAxisName="yAxis"
ValueMemberPath="Hydro"
DataSource="@data" />
<ColumnSeries
Name="series1"
XAxisName="xAxis"
YAxisName="yAxis"
ValueMemberPath="Nuclear"
DataSource="@data" />
<ColumnSeries
Name="series1"
XAxisName="xAxis"
YAxisName="yAxis"
ValueMemberPath="Gas"
DataSource="@data" />
<ColumnSeries
Name="series1"
XAxisName="xAxis"
YAxisName="yAxis"
ValueMemberPath="Oil"
DataSource="@data" />
</DataChart>
</div>