Web Components 凡例

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

Web Components 凡例の例

Edit on CodeSandbox

凡例概要

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

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

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

<div>
  <igc-legend id="legend" orientation="horizontal">
  </igc-legend>
</div>
<div>
  <igc-data-chart id="chart" height="500px" width="700px" >

    <igc-category-x-axis id="xAxis" label="Country"></igc-category-x-axis>
    <igc-numeric-y-axis id="yAxis" min-value="0" abbreviate-large-numbers="true"></igc-numeric-y-axis>

    <igc-column-series id="series1" title=" Coal" value-member-path="Coal"></igc-column-series>
    <igc-column-series id="series2" title=" Hydro" value-member-path="Hydro"></igc-column-series>
    <igc-column-series id="series3" title=" Nuclear" value-member-path="Nuclear"></igc-column-series>
    <igc-column-series id="series4" title=" Gas" value-member-path="Gas"></igc-column-series>
    <igc-column-series id="series5" title=" Oil" value-member-path="Oil"></igc-column-series>
  </igc-data-chart>
</div>
let chart = (document.getElementById("chart") as IgcDataChartComponent);
chart.dataSource = data;

let legend = (document.getElementById("legend") as IgcLegendComponent);
chart.legend = legend;

let xAxis = (document.getElementById("xAxis") as IgcCategoryXAxisComponent);
let yAxis = (document.getElementById("yAxis") as IgcNumericYAxisComponent);

let series1 = (document.getElementById("series1") as IgcColumnSeriesComponent);
series1.xAxis = xAxis;
series1.yAxis = yAxis;

let series2 = (document.getElementById("series2") as IgcColumnSeriesComponent);
series2.xAxis = xAxis;
series2.yAxis = yAxis;

let series3 = (document.getElementById("series3") as IgcColumnSeriesComponent);
series3.xAxis = xAxis;
series3.yAxis = yAxis;

let series4 = (document.getElementById("series4") as IgcColumnSeriesComponent);
series4.xAxis = xAxis;
series4.yAxis = yAxis;

let series5 = (document.getElementById("series5") as IgcColumnSeriesComponent);
series5.xAxis = xAxis;
series5.yAxis = yAxis;