Web Components データ凡例
Ignite UI for Web Components では、IgcDataLegendComponent
は IgcLegendComponent
の高度にカスタマイズ可能なバージョンであり、シリーズの値を表示するほか、シリーズの行や値の列のフィルタリング、値のスタイルと書式設定を行うための多くの構成プロパティを提供します。この凡例は、IgcCategoryChartComponent
、IgcFinancialChartComponent
、および IgcDataChartComponent
のプロット領域内でマウスを動かすと更新されます。また、ユーザーのマウス ポインターがプロット領域を出ると、最後にホバーされたポイントが維持されます。このコンテンツは、3 種類の行 (ヘッダー、シリーズ、要約) と 4 種類の列 (タイトル、ラベル、値、単位) のセットを使用して表示されます。
Web Components データ凡例の行
IgcDataLegendComponent
の行には、ヘッダー行、シリーズ行、および集計行が含まれます。ヘッダー行には、ホバーされたポイントの軸ラベルが表示され、headerText
プロパティを使用して変更できます。
ヘッダー行
ヘッダー行には、カテゴリ シリーズとファイナンシャル シリーズにマウスを合わせると、x 軸の現在のラベルが表示されます。x 軸に日付が表示されている場合は、headerFormatDate
プロパティと headerFormatTime
プロパティを使用して、IgcDataLegendComponent
の日付と時刻を書式設定できます。他のタイプのシリーズの場合、IgcDataLegendComponent
はヘッダー行を描画しません。
シリーズ行
シリーズ行は、チャートにプロットされた各シリーズを表します。これらの行には、凡例バッジ、シリーズ タイトル、シリーズの実際の値 / 省略値、および指定されている場合は省略記号と測定単位が表示されます。includedSeries
または excludedSeries
プロパティをシリーズのインデックス (1、2、3) またはシリーズのタイトル (Tesla、Microsoft) のコレクションに設定することにより、シリーズの行をフィルタできます。
集計行
最後に、すべてのシリーズ値の合計を表示する集計行があります。デフォルトの集計タイトルは、凡例の summaryTitleText
プロパティを使用して変更できます。また、summaryType
プロパティを使用して、集計行にシリーズの値の Total
、Min
、Max
、または Average
を表示するかどうかをカスタマイズできます。
Web Components データ凡例の列
IgcDataLegendComponent
の列には、シリーズのタイトル、ラベル、データ列の値、および値に関連付けられたオプションの単位が含まれます。チャートの一部のシリーズには、ラベル、値、および単位の複数の列を含めることができます。たとえば、財務価格シリーズには、High、Low、Open、および Close のデータ列があります。これらは、includedColumns
または excludedColumns
プロパティを使用して IgcDataLegendComponent
でフィルタリングできます。
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 (変更) は、ファイナンシャル シリーズによって自動的に計算されるため、データ ソースに含める必要はありません。
タイトル列
タイトル列には、チャートにプロットされた各 IgcSeriesComponent
の 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" |
また、IgcDataLegendComponent
の UnitText
プロパティを使用して、すべての Unit 列に表示されるテキストを変更できます。
Web Components データ凡例のスタイル設定
IgcDataLegendComponent
は、各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティの名前は、Title、Label、Value、または Units で始まります。テキストの色、フォント、余白のスタイルを設定できます。たとえば、すべての列のテキストの色を設定する場合は、titleTextColor
、labelTextColor
、valueTextColor
、および unitsTextColor
プロパティを設定します。次の例は、上記のスタイル設定プロパティの使用法を示しています:
Web Components データ凡例値の書式設定
IgcDataLegendComponent
は、valueFormatAbbreviation
プロパティを使用して、大きな数値の自動省略形を提供します。これにより、単位の列に kilo、million、billion などの乗数が追加されます。valueFormatMinFractions
および valueFormatMaxFractions
を設定することにより、表示される小数桁数をカスタマイズできます。これにより、小数点以下に表示される最小桁数と最大桁数をそれぞれ決定できます。
次の例は、これらのプロパティの使用方法を示しています:
Web Components データ凡例の値モード
valueFormatMode
プロパティを変更することにより、IgcDataLegendComponent
内の値のデフォルトの 10 進表示を通貨表示に変更することができます。また、valueFormatCulture
プロパティにカルチャ タグを設定することで、表示される通貨記号のカルチャを変更できます。たとえば、次のデータ凡例の例では、valueFormatCulture
が 「en-GB」 に設定されており、英国ポンド (£) の記号が表示されています:
Web Components データ凡例のグループ化
DataLegendGroup
は、すべてのタイプのシリーズで、データ凡例内のシリーズ グループを分類する文字列に設定できます。各グループには、別のシリーズ グループが表示される前に、独自の集計行が表示されます。
デフォルトでは、DataLegend はグループ名を非表示にしますが、GroupRowVisible
プロパティを true に設定するとグループ名を表示できます。
Web Components データ凡例のスタイル設定とイベント
凡例のグループ化部分を含むいくつかのプロパティが公開されています。
GroupRowMargin
GroupTextMargin
GroupTextColor
GroupTextFontSize
GroupTextFontFamily
GroupTextFontStyle
GroupTextFontStretch
GroupTextFontWeight
HeaderTextMargin
headerTextColor
HeaderTextFontSize
HeaderTextFontFamily
HeaderTextFontStyle
HeaderTextFontStretch
HeaderTextFontWeight
IgcDataLegendComponent
には、値が更新されているマウス操作中であっても、対応する行を描画するときに発生するいくつかのイベントがあります。それらのイベントを、その使用目的とあわせて以下に示します:
StyleGroupRow
: このイベントは、グループ行に表示されるテキストのスタイルを設定するために、グループごとに発生します。StyleHeaderRow
: このイベントは、ヘッダー行を描画するときに発生します。StyleSeriesRow
: このイベントは、シリーズの行ごとに 1 回発生し、シリーズの値の条件付きスタイル設定を可能にします。StyleSeriesColumn
: このイベントは、シリーズの列ごとに 1 回発生し、シリーズの値の条件付きスタイル設定を可能にします。StyleSummaryRow
: このイベントは、集計行を描画するときに 1 回発生します。StyleSummaryColumn
: このイベントは、集計列を描画するときに 1 回発生します。
一部のイベントは、引数として IgcDataLegendStylingRowEventArgs
パラメーターを公開します。これにより、各項目のテキスト、テキストの色、および行の全体的な可視性をカスタマイズできます。イベント引数は、イベント固有のプロパティも公開します。たとえば、StyleSeriesRow
イベントはシリーズごとに発生するため、イベント引数は、シリーズを表す行の、シリーズ インデックスとシリーズ タイトルを返します。
StyleSummaryColumn
および SeriesStyleColumn
イベントは、シリーズ内の各フィールドをカスタマイズするために、引数として IgcDataLegendStylingColumnEventArgs
パラメーターを公開します。イベント引数は、列インデックスや値メンバーなどの列に関するプロパティに関連するイベント固有のプロパティも公開します。
API リファレンス
excludedColumns
excludedSeries
headerFormatDate
headerFormatTime
headerText
includedColumns
includedSeries
labelDisplayMode
labelTextColor
StyleHeaderRow
:StyleSeriesColumn
:StyleSeriesRow
StyleSeriesRow
:StyleSummaryColumn
:StyleSummaryRow
:summaryTitleText
summaryType
titleTextColor
UnitText
unitsTextColor
valueFormatAbbreviation
valueFormatCulture
valueFormatMaxFractions
valueFormatMaxFractions
valueFormatMinFractions
valueFormatMode
valueTextColor