DataToolTipLayer は、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。さらに、シリーズの行と値の列をフィルタリングし、値をスタイル設定し、書式を設定するための igDataLegend の多くの構成プロパティを提供します。このツールチップ タイプは、igCategoryChart、igFinancialChart、および igDataChart コンポーネントのプロット領域内でマウスを動かすと更新されます。
DataToolTipLayer のすべてのプロパティには DataToolTip のプレフィックスが付けられ、igCategoryChart および igFinancialChart コンポーネントの API で公開されます。ただし、ラジアル チャート、極座標チャート、散布図で使用する場合は、DataToolTipLayer のインスタンスを作成し、それを igDataChart コンポーネントのシリーズ コレクションに追加する必要があります。
DataToolTipLayer は、3 種類の行と 4 種類の列のセットを使用してコンテンツを表示します。
DataToolTipLayer の行には、ヘッダー行、シリーズ行、および集計行が含まれます。
ヘッダー行には、ホバーされたポイントの軸ラベルが表示され、headerText プロパティを使用して変更できます。
シリーズ行は、実際には、チャートにプロットされた各シリーズに対応する行のセットにすることができます。これらの行には、凡例バッジ、シリーズ タイトル、シリーズの実際の値 / 省略値、および指定されている場合は省略記号と単位が表示されます。
最後に、すべてのシリーズ値の合計を表示する集計行があります。デフォルトの集計タイトルは、シリーズの summaryText プロパティを使用して変更できます。また、summaryType プロパティを使用して、シリーズ値の合計、最小、最大、または平均を集計行に表示するかどうかをカスタマイズできます。
以下のコードス ニペットは、上記のプロパティを設定して、集計のカスタム タイトルとカスタム ヘッダーを持つ Total 集計タイプの DataToolTipLayer を設定する方法を示しています。
JavaScript の場合:
$("#chartContainer").igDataChart({
dataSource: data,
axes: [{
type: "categoryX",
name: "xAxis",
label: "Label",
}, {
type: "numericY",
name: "yAxis",
}],
series: [{
type: "column",
name: "series",
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Value"
},
{
name: "dataTooltipLayer",
type: "dataToolTipLayer",
headerText: "My Custom Data Tooltip Header",
summaryType: "total",
summaryTitleText: "Grand Total:"
}]
});
データ ツールチップの列には、タイトル、ラベル、値、および単位の列が含まれます。チャートの各シリーズには、ツールチップ レイヤーの includedColumns または excludedColumns コレクションに応じて、ラベル、値、および単位の複数の列を含めることができます。
タイトル列には、チャートにプロットされたさまざまなシリーズの title プロパティに由来する凡例バッジとシリーズ タイトルが表示されます。
ラベルの列には、ツールチップ レイヤーの includedColumns または excludedColumns コレクション内のさまざまなプロパティパスの名前または省略形が表示されます。
値の列には、一連の値が省略形のテキストとして表示されます。このテキストは、valueFormatAbbreviation プロパティを使用してフォーマットでき、このプロパティを Auto または Shared に設定することで、すべての数値に同じ省略形を適用できます。または、ユーザーは Independent、Kilo、Million などの他の省略形を選択できます。省略値の精度は、最小桁数と最大桁数にそれぞれ valueFormatMinFractions と valueFormatMaxFractions を使用して制御されます。
単位の列には、省略記号や単位テキストが表示されます。これらは、すべての列に unitText を設定するか、チャートの各シリーズで次のプロパティを使用して、DataToolTipLayer で設定できます:
カテゴリ シリーズ (例: ColumnSeries)
財務物価シリーズ:
範囲シリーズ:
ラジアル シリーズ:
極座標シリーズ:
上記の各プロパティには、前述のラベル列のテキストを判別するための対応する MemberAsLegendLabel プロパティもあります。
includedColumns および excludedColumns に含まれる列は、通常、基になるデータ項目の値パスに対応しますが、財務シリーズには、正しくプロットするために必要な High、Low、Open、Close パス、および、いくつかの特別なパスを含めるオプションがあります 。凡例内に typicalPrice、change、および volume オプションを表示することができます。
以下のコード スニペットは、valueMemberAsLegendUnit プロパティが設定された ColumnSeries のペアと、DataToolTipLayer に設定された最小/最大の分数を示しています。
JavaScript の場合:
$("#chartContainer").igDataChart({
dataSource: data,
axes: [{
type: "categoryX",
name: "xAxis",
label: "Label",
}, {
type: "numericY",
name: "yAxis",
}],
series: [{
type: "column",
name: "series",
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Value",
valueMemberAsLegendUnit="K"
},
{
name: "dataTooltipLayer",
type: "dataToolTipLayer",
valueFormatMinFractions: 2,
valueFormatMaxFractions: 4
}]
});
DataToolTipLayer は、各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティ名は、Title、Label、Value、Units で始まり、テキストの色、フォント、およびマージンのスタイルを設定できます。たとえば、これらのそれぞれのテキストの色を設定する場合は、titleTextColor、labelTextColor、valueTextColor、および unitsTextColor プロパティを設定します。
以下のコード スニペットは、上記のスタイル設定プロパティを設定する方法を示しています。
JavaScript の場合:
$("#chartContainer").igDataChart({
dataSource: data,
axes: [{
type: "categoryX",
name: "xAxis",
label: "Label",
}, {
type: "numericY",
name: "yAxis",
}],
series: [{
type: "column",
name: "series",
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Value"
},
{
name: "dataTooltipLayer",
type: "dataToolTipLayer",
titleTextColor: "lightgray",
labelTextColor: "lightgray",
valueTextColor: "green",
unitsTextColor: "green",
unitsText: "K"
}]
});
groupingMode プロパティを Grouped または Individual に設定して、複数のシリーズのコンテンツを 1 つのツールチップにグループ化するか、各シリーズのコンテンツを複数のツールチップに分割することができます。Grouped モードでは、groupedPositionModeX プロパティと groupedPositionModeY プロパティを設定することにより、ツールチップが表示される場所をカスタマイズできます。これにより、ツールチップの水平方向と垂直方向の配置を、マウス位置に最も近いシリーズ ポイントに追従させるか、プロット領域の端に固定するかをカスタマイズできます。
以下のコード スニペットは、スクロールするとチャートの左上にピン固定される DataToolTipLayer を示しています。
JavaScript の場合:
$("#chartContainer").igDataChart({
dataSource: data,
axes: [{
type: "categoryX",
name: "xAxis",
label: "Label",
}, {
type: "numericY",
name: "yAxis",
}],
series: [{
type: "column",
name: "series",
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Value"
},
{
name: "dataTooltipLayer",
type: "dataToolTipLayer",
groupingMode: "grouped",
groupedPositionModeX: "pinLeft",
groupedPositionModeY: "pinTop"
}]
});
DataToolTipLayer は、valueFormatAbbreviation プロパティを使用して、大きな数値の自動省略形を提供します。これにより、単位の列に kilo、million、billion などの乗数が追加されます。valueFormatMinFractions および valueFormatMaxFractions を設定することにより、表示される小数桁数をカスタマイズできます。これにより、小数点以下に表示される最小桁数と最大桁数をそれぞれ決定できます。
以下のコード スニペットは、DataToolTipLayer の最小分数と最大分数を設定する方法を示しています。
JavaScript の場合:
$("#chartContainer").igDataChart({
dataSource: data,
axes: [{
type: "categoryX",
name: "xAxis",
label: "Label",
}, {
type: "numericY",
name: "yAxis",
}],
series: [{
type: "column",
name: "series",
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Value"
},
{
name: "dataTooltipLayer",
type: "dataToolTipLayer",
valueFormatMinFractions: 2,
valueFormatMaxFractions: 4
}]
});
レイヤーの valueFormatMode プロパティを変更することにより、DataToolTipLayer 内の値のデフォルトの 10 進表示を通貨表示に変更できます。DataToolTipLayer は、その valueFormatCulture プロパティに対応するカルチャ タグを設定することにより、表示されている通貨記号のカルチャを変更する機能も公開します。
たとえば、以下のコード スニペットは、valueFormatCulture が "en-GB" に設定され、valueFormatMode が "Currency" に設定された DataToolTipLayer を作成します。
JavaScript の場合:
$("#chartContainer").igDataChart({
dataSource: data,
axes: [{
type: "categoryX",
name: "xAxis",
label: "Label",
}, {
type: "numericY",
name: "yAxis",
}],
series: [{
type: "column",
name: "series",
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Value"
},
{
name: "dataTooltipLayer",
type: "dataToolTipLayer",
valueFormatMode: "currency",
valueFormatCulture: "en-GB"
}]
});
オンラインで表示: GitHub