バージョン 24.2 (最新)

データ凡例

igDataLegend は Legend のように機能するコンポーネントですが、シリーズの値の表示や、シリーズの行と値の列のフィルタリング、値のスタイルと書式を設定するための多くの構成プロパティを提供します。この凡例は、igCategoryChart のプロット領域内でマウスを移動すると更新され、ユーザーのマウス ポインターがプロット領域を離れたときに最後にホバーされたポイントを記憶する永続的な状態になります。このコンテンツは、3 種類の行と 4 種類の列のセットを使用して表示されます。

データ凡例の行

igDataLegend の行には、ヘッダー行、シリーズ行、および集計行が含まれます。

ヘッダー行には、ホバーされたポイントの軸ラベルが表示され、headerText プロパティを使用して変更できます。

シリーズ行は、実際には、チャートにプロットされた各シリーズに対応する行のセットにすることができます。これらの行には、凡例バッジ、シリーズ タイトル、シリーズの実際の値 / 省略値、および指定されている場合は省略記号と単位が表示されます。

最後に、すべてのシリーズ値の合計を表示する集計行があります。デフォルトの集計タイトルは、凡例の summaryTitleText プロパティを使用して変更できます。また、summaryType プロパティを使用して、シリーズ値の合計、最小、最大、または平均を集計行に表示するかどうかをカスタマイズできます。

以下のコードス ニペットは、上記のプロパティを設定して、集計のカスタム タイトルとカスタム ヘッダーを持つ Total 集計タイプの igDataLegend を設定する方法を示しています。

JavaScript の場合:

$("#dataLegendContainer").igDataLegend({
    target: $("#chartContainer").igCategoryChart(),
    headerText: "My Custom Data Legend Header",
    summaryType: "total",
    summaryTitleText: "Grand Total"
});

データ凡例の列

igDataLegend の列には、タイトル、ラベル、値、および単位の列が含まれます。チャートの各シリーズには、凡例の includedColumns または excludedColumns コレクションに応じて、ラベル、値、および単位の複数の列を含めることができます。

タイトル列には、チャートにプロットされたさまざまな Series の title プロパティに由来する凡例バッジとシリーズ タイトルが表示されます。

ラベルの列には、凡例の includedColumns または excludedColumns コレクション内のさまざまなプロパティパスの名前または省略形が表示されます。

値の列には、一連の値が省略形のテキストとして表示されます。このテキストは、valueFormatAbbreviation プロパティを使用してフォーマットでき、このプロパティを Auto または Shared に設定することで、すべての数値に同じ省略形を適用できます。または、ユーザーは Independent、Kilo、Million などの他の省略形を選択できます。省略値の精度は、最小桁数と最大桁数にそれぞれ valueFormatMinFractions と valueFormatMaxFractions を使用して制御されます。

単位の列には、省略記号や単位テキストが表示されます。これらは、UnitText プロパティを設定することで igDataLegend に設定できます。

以下のコード スニペットは、unitText と igDataLegend に設定された最小/最大の分数を示しています。

JavaScript の場合:

$("#dataLegendContainer").igDataLegend({
    target: $("#chartContainer").igCategoryChart(),
    valueFormatMinFractions: 2,
    valueFormatMaxFractions: 4,
    unitsText: "K"
});

データ凡例のスタイル設定

igDataLegend は、各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティ名は、Title、Label、Value、Units で始まり、テキストの色、フォント、およびマージンのスタイルを設定できます。たとえば、これらのそれぞれのテキストの色を設定する場合は、titleTextColor、labelTextColor、valueTextColor、および unitsTextColor プロパティを設定します。

以下のコード スニペットは、上記のスタイル設定プロパティを設定する方法を示しています。

JavaScript の場合:

$("#dataLegendContainer").igDataLegend({
    target: $("#chartContainer").igCategoryChart(),
    titleTextColor: "lightgray",
    labelTextColor: "lightgray",
    valueTextColor: "green",
    unitsTextColor: "green",
    unitsText: "K"
});

データ凡例値の書式設定

igDataLegend は、valueFormatAbbreviation プロパティを使用して、大きな数値の自動省略形を提供します。これにより、単位の列に kilo、million、billion などの乗数が追加されます。

valueFormatMinFractions および valueFormatMaxFractions を設定することにより、表示される小数桁数をカスタマイズできます。これにより、小数点以下に表示される最小桁数と最大桁数をそれぞれ決定できます。

以下のコード スニペットは、igDataLegend の最小分数と最大分数を設定する方法を示しています。

JavaScript の場合:

$("#dataLegendContainer").igDataLegend({
    target: $("#chartContainer").igCategoryChart(),
    valueFormatMinFractions: 2,
    valueFormatMaxFractions: 4
});

データ凡例の値モード

コントロールの valueFormatMode プロパティを変更することにより、igDataLegend 内の値のデフォルトの 10 進表示を通貨に変更することができます。igDataLegend は、その valueFormatCulture プロパティに対応するカルチャ タグを設定することにより、表示されている通貨記号のカルチャを変更する機能も公開します。

たとえば、以下のコード スニペットは、valueFormatCulture が "en-GB" に設定され、valueFormatMode が "Currency" に設定された igDataLegend を作成します。

JavaScript の場合:

$("#dataLegendContainer").igDataLegend({
    target: $("#chartContainer").igCategoryChart(),
    valueFormatMode: "currency",
    valueFormatCulture: "en-GB"
});

データ凡例のスタイル設定イベント

igDataLegend には、対応する行を描画するときに発生する 5 つのイベントがあります。それらのイベントを、その使用目的とあわせて以下に示します:

  • styleHeaderRow: このイベントは、ヘッダー行を描画するときに 1 回発生します。
  • styleSeriesRow: このイベントは、シリーズの行ごとに 1 回発生し、シリーズの値の条件付きスタイル設定を可能にします。
  • styleSeriesColumn: このイベントは、シリーズ列ごとに 1 回発生します。これにより、チャート内のシリーズのさまざまな列の条件付きスタイルが可能になります。
  • styleSummaryRow: このイベントは、集計行を描画するときに 1 回発生します。
  • styleSummaryColumn: このイベントは、集計列を描画するときに 1 回発生します。

上記の各イベントは、引数として DataLegendStylingRowEventArgs パラメーターを公開します。これにより、各項目のテキスト、テキストの色、および行の全体的な可視性をカスタマイズできます。イベント引数は、イベント固有のプロパティも公開します。たとえば、styleSeriesRow イベントはシリーズごとに発生するため、イベント引数は、シリーズを表す行の、シリーズ インデックスとシリーズ タイトルを返します。

オンラインで表示: GitHub