Angular データ凡例

Ignite UI for Angular では、IgxDataLegendComponent は IgxLegendComponent の高度にカスタマイズ可能なバージョンであり、シリーズの値を表示するほか、シリーズの行や値の列のフィルタリング、値のスタイルと書式設定を行うための多くの構成プロパティを提供します。この凡例は、IgxCategoryChartComponent、IgxFinancialChartComponent、および IgxDataChartComponent のプロット領域内でマウスを動かすと更新されます。また、ユーザーのマウスポインターがプロット領域を出ると、最後にホバーされたポイントが維持されます。このコンテンツは、3 種類の行 (ヘッダー、シリーズ、要約) と 4 種類の列 (タイトル、ラベル、値、単位) のセットを使用して表示されます。

Angular データ凡例の行

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

ヘッダー行

ヘッダー行には、カテゴリシリーズとファイナンシャルシリーズにマウスを合わせると、x 軸の現在のラベルが表示されます。x 軸に日付が表示されている場合は、headerFormatDate プロパティと headerFormatTime プロパティを使用して、IgxDataLegendComponent の日付と時刻を書式設定できます。他のタイプのシリーズの場合、IgxDataLegendComponent はヘッダー行を描画しません。

シリーズ行

シリーズ行は、チャートにプロットされた各シリーズを表します。これらの行には、凡例バッジ、シリーズタイトル、シリーズの実際の値 / 省略値、および指定されている場合は省略記号と測定単位が表示されます。includedSeries または excludedSeries プロパティをシリーズのインデックス (1、2、3) またはシリーズのタイトル (Tesla、Microsoft) のコレクションに設定することにより、シリーズの行をフィルタできます。

集計行

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

Angular データ凡例の列

IgxDataLegendComponent の列には、シリーズのタイトル、ラベル、データ列の値、および値に関連付けられたオプションの単位が含まれます。チャートの一部のシリーズには、ラベル、値、および単位の複数の列を含めることができます。たとえば、財務価格シリーズには、High、Low、Open、および Close のデータ列があります。これらは、includedColumns または excludedColumns プロパティを使用して IgxDataLegendComponent でフィルタリングできます。

includedColumns プロパティと excludedColumns プロパティの値の設定は、シリーズのタイプとそれらがサポートするデータ列の数によって異なります。たとえば、includedColumns プロパティに Open および Close の文字列コレクションを設定すると、チャートがファイナンシャルシリーズをプロットしているときに、株価の始値と終値のみが表示されます。次の表に、データシリーズの列をフィルタリングするために使用できるすべての列名を示します。

シリーズのタイプ	列名
カテゴリシリーズ	Value
ラジアルシリーズ	Value
極座標シリーズ	Radius、Angle
バブルシリーズ	X、Y、Radius
散布シリーズ	X、Y
範囲シリーズ	High、Low
ファイナンシャルシリーズ	High、Low、Open、Close、Change、TypicalPrice、Volume

OHLC 価格の TypicalPrice (標準価格) とパーセンテージの Change (変更) は、ファイナンシャルシリーズによって自動的に計算されるため、データソースに含める必要はありません。

タイトル列

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

ラベル列

ラベル列には、値列の左側に短い名前が表示されます。たとえば、Open 株価の場合は「O」です。labelDisplayMode プロパティを使用して、この列の表示・非表示を切り替えることができます。

値列

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

単位列

単位列には、値列の右側に省略記号が表示されます。単位記号は、valueFormatAbbreviation プロパティに依存します。「M」は「Million」の略語です。

列のカスタマイズ

プロパティ名が MemberAsLegendLabel および MemberAsLegendUnit で終わる、各シリーズのプロパティを使用して、Label および Unit 列に表示されるテキストをカスタマイズできます。次の表は、Label 列と Unit 列で可能なカスタマイズをいくつか示しています。

シリーズのタイプ	シリーズのプロパティ
カテゴリシリーズ	ValueMemberAsLegendLabel="$" ValueMemberAsLegendUnit="M"
ラジアルシリーズ	ValueMemberAsLegendLabel="Distance:" ValueMemberAsLegendUnit="KM"
極座標シリーズ	RadiusMemberAsLegendLabel="Radius:" RadiusMemberAsLegendUnit="KM" AngleMemberAsLegendLabel="Angle:" AngleMemberAsLegendUnit="°"
範囲シリーズ	HighMemberAsLegendLabel="H:" HighMemberAsLegendUnit="K" LowMemberAsLegendLabel="L:" LowMemberAsLegendUnit="K"
ファイナンシャルシリーズ	OpenMemberAsLegendLabel="O:" OpenMemberAsLegendUnit="K" HighMemberAsLegendLabel="H:" HighMemberAsLegendUnit="K" LowMemberAsLegendLabel="L:" LowMemberAsLegendUnit="K" CloseMemberAsLegendLabel="C:" CloseMemberAsLegendUnit="K"

また、IgxDataLegendComponent の UnitText プロパティを使用して、すべての Unit 列に表示されるテキストを変更できます。

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

IgxDataLegendComponent は、各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティの名前は、Title、Label、Value、または Units で始まります。テキストの色、フォント、余白のスタイルを設定できます。たとえば、すべての列のテキストの色を設定する場合は、titleTextColor、labelTextColor、valueTextColor、および unitsTextColor プロパティを設定します。次の例は、上記のスタイル設定プロパティの使用法を示しています:

Angular データ凡例値の書式設定

IgxDataLegendComponent は、valueFormatAbbreviation プロパティを使用して、大きな数値の自動省略形を提供します。これにより、単位の列に kilo、million、billion などの乗数が追加されます。valueFormatMinFractions および valueFormatMaxFractions を設定することにより、表示される小数桁数をカスタマイズできます。これにより、小数点以下に表示される最小桁数と最大桁数をそれぞれ決定できます。次の例は、これらのプロパティの使用方法を示しています:

Angular データ凡例の値モード

valueFormatMode プロパティを変更することにより、IgxDataLegendComponent 内の値のデフォルトの 10 進表示を通貨表示に変更することができます。また、valueFormatCulture プロパティにカルチャタグを設定することで、表示される通貨記号のカルチャを変更できます。たとえば、次のデータ凡例の例では、valueFormatCulture が「en-GB」に設定されており、英国ポンド (£) の記号が表示されています:

Angular データ凡例のグループ化

dataLegendGroup は、すべてのタイプのシリーズで、データ凡例内のシリーズグループを分類する文字列に設定できます。各グループには、別のシリーズグループが表示される前に、独自の集計行が表示されます。デフォルトでは、DataLegend はグループ名を非表示にしますが、groupRowVisible プロパティを true に設定するとグループ名を表示できます。

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

凡例のグループ化部分を含むいくつかのプロパティが公開されています。

GroupRowMargin
GroupTextMargin
groupTextColor
GroupTextFontSize
GroupTextFontFamily
GroupTextFontStyle
GroupTextFontStretch
GroupTextFontWeight
HeaderTextMargin
headerTextColor
HeaderTextFontSize
HeaderTextFontFamily
HeaderTextFontStyle
HeaderTextFontStretch
HeaderTextFontWeight

IgxDataLegendComponent には、値が更新されているマウス操作中であっても、対応する行を描画するときに発生するいくつかのイベントがあります。それらのイベントを、その使用目的とあわせて以下に示します:

StyleGroupRow: このイベントは、グループ行に表示されるテキストのスタイルを設定するために、グループごとに発生します。
StyleHeaderRow: このイベントは、ヘッダー行を描画するときに発生します。
StyleSeriesRow: このイベントは、シリーズの行ごとに 1 回発生し、シリーズの値の条件付きスタイル設定を可能にします。
StyleSeriesColumn: このイベントは、シリーズの列ごとに 1 回発生し、シリーズの値の条件付きスタイル設定を可能にします。
StyleSummaryRow: このイベントは、集計行を描画するときに 1 回発生します。
StyleSummaryColumn: このイベントは、集計列を描画するときに 1 回発生します。

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

StyleSummaryColumn および SeriesStyleColumn イベントは、シリーズ内の各フィールドをカスタマイズするために、引数として IgxDataLegendStylingColumnEventArgs パラメーターを公開します。イベント引数は、列インデックスや値メンバーなどの列に関するプロパティに関連するイベント固有のプロパティも公開します。