ツールチップ
ツールチップは、データポイント、線、その他の視覚コンポーネントなどのチャート要素に関する追加情報と詳細データを提供することで、ユーザーの理解を深めます。
データチャートにツールチップを実装するには、ツールチップのスタイルとコンテンツを定義するIPlotConfigTooltipOptionおよびIContentEncodingOptionインターフェイスを使用します。
プロパティ
データチャートでは、以下の表に示すように、次のプロパティを使用してツールチップが構成されます。
プロパティ | 説明 |
|---|---|
dataChartConfig.plots[0].encodings.tooltip | このプロパティでは、ツールチップに表示されるフィールドを設定できます。このプロパティが明示的に定義されていない場合、データチャートはチャートにバインドされているすべてのフィールドを自動的に追加することに注意してください。詳細については、データの連携を参照してください。 |
dataChartConfig.plots[0].config.tooltip | このプロパティでは、ツールチップのスタイルを設定し、ツールチップを表示するかどうかを制御できます。 |
メモ:
同じフィールドをツールチップに複数回表示することはできません。
同じフィールドをツールチップに重複して表示することはできません。
複数のフィールドがバインドされている場合、にバインドされている最初のフィールドに基づいてツールチップ情報は表示されます。
ツールチップで、集計フィールドが GC.Spread.Sheets.DataCharts.Aggregate.average に設定されている場合、データは“0.00"としてフォーマットされます。
コードの使用
次のサンプルコードは、データチャートでツールチップを構成する方法を示しています。
このサンプルでは、データチャートの作成ページに記載されているsalesTableデータを使用しています。したがって、そのページに記載されている主要な手順に従ってデータチャートの設定を完了してください。完了したら、次のコードを使用してツールチップを構成できます。さらに、特定のニーズに応じてデータ ソースをカスタマイズする柔軟性もあります。
// dataChartConfig.plots[0].config.tooltip
const sheet = spread.getSheet(0);
sheet.name("ToolTip Config");
sheet.setValue(18, 0, "Hover Over the Data Chart");
sheet.setValue(19, 0, "Data Chart will try to add all the fields bound in the current chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' },
},
config: {
//このプロパティを設定することで、ツールチップのスタイルを設定し、チャートにツールチップを表示するかどうかを制御できます。
//このプロパティがnullの場合、ツールチップは表示されません。
//encoding.tooltipプロパティで設定することもできます。
tooltip: [{
style: {
fill: { type: "CssColor", color: "#fff" },
stroke: { type: "CssColor", color: "#E0E0E0" },
strokeWidth: 2,
},
textStyle: {
color: "#4a4a4a",
fontFamily: "Calibri",
fontSize: 12,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
fontWeight: "Bold",
writingMode: GC.Spread.Sheets.DataCharts.Orientation.horizontal,
textDecoration: { underline: true }
}
}]
}
}
]
});
// dataChartConfig.plots[0].encodings.tooltip
const sheet1 = spread.getSheet(1);
sheet1.name("Binding Fields");
sheet1.setValue(18, 0, "Hover Over the Data Chart");
sheet1.setValue(19, 0, "Tooltip Field: Salesman, Aggregate: COUNT");
sheet1.setValue(20, 0, "Tooltip Field: Sales, Aggregate: AVERAGE");
const dataChart2 = sheet1.dataCharts.add('data-chart-2', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart2.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' },
//フィールドをdataChartConfig.plots[0].encodings.tooltipにバインドします。
//ユーザーがこのプロパティを設定しない場合、データチャートは現在のチャートにバインドされているすべてのフィールドを追加しようとします。
tooltip: [
{ field: "Salesman", aggregate: GC.Spread.Sheets.DataCharts.Aggregate.count },
{ field: "Sales", aggregate: GC.Spread.Sheets.DataCharts.Aggregate.average }
]
},
config: {
tooltip: [{
style: {
fill: { type: "CssColor", color: "#fff" },
stroke: { type: "CssColor", color: "#E0E0E0" },
strokeWidth: 2,
},
}]
}
}
]
});