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>