如何在数据聚合的堆叠柱状图中实现自定义提示框？

需要基于明细数据分组聚合生成堆叠柱状图，同时为每个堆叠的柱状条配置自定义提示框，但当前代码仅对数值列做了聚合，丢失了自定义tooltip信息，无法正常显示目标效果（参考示例截图：）。

解决方案 #

核心问题是分组聚合时未同步保留自定义tooltip列的信息，需调整数据分组逻辑，为每个聚合后的数值列匹配对应的自定义tooltip内容：

• 对每个数值列，同步处理其对应的tooltip列：若同一分组内tooltip内容一致，使用google.visualization.data.first聚合器保留第一个值；若需合并内容，可自定义聚合函数。
• 为分组后的DataTable添加tooltip角色列，关联到对应的数值列。

修改后的完整代码 #

HTML部分

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id='chart'></div>

JavaScript部分

// Load the Visualization API and the corechart package.
google.charts.load('current', { 'packages': ['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);

function gChart0() { drawDashboard()}

function drawDashboard() {
  const dummyJSON = [
[
{"id":"bucketName","label":"bucketName"},
{"id":"bin","label":"bin"},
{"id":"1_2_Shift_ERRORBIN","label":"1_2_Shift_ERRORBIN"},
{"id":"1_2_Shift_ERRORBIN_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_TRUCK","label":"1_2_Shift_TRUCK"},
{"id":"1_2_Shift_TRUCK_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_TRUCK01","label":"1_2_Shift_TRUCK01"},
{"id":"1_2_Shift_TRUCK01_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_TRUCK02","label":"1_2_Shift_TRUCK02"},
{"id":"1_2_Shift_TRUCK02_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_TRUCK04","label":"1_2_Shift_TRUCK04"},
{"id":"1_2_Shift_TRUCK04_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_TVSERROR","label":"1_2_Shift_TVSERROR"},
{"id":"1_2_Shift_TVSERROR_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_VBIN","label":"1_2_Shift_VBIN"},
{"id":"1_2_Shift_VBIN_TT","role":"tooltip","label":"tooltip"}
],
["1_2_Shift","TRUCK01",0,"custom tooltip A",0,"custom tooltip B",17,"custom tooltip C",0,"custom tooltip D",0,"custom tooltip E",0,"custom tooltip F",0,"custom tooltip G"],
["1_2_Shift","TRUCK04",0,"custom tooltip 1",0,"custom tooltip 2",0,"custom tooltip 3",0,"custom tooltip 4",20,"custom tooltip 5",0,"custom tooltip 6",0,"custom tooltip 7"],
["1_2_Shift","TRUCK04",0,"custom tooltip 1",0,"custom tooltip 2",0,"custom tooltip 3",0,"custom tooltip 4",40,"custom tooltip 5",0,"custom tooltip 6",0,"custom tooltip 7"]
];

var data = google.visualization.arrayToDataTable(dummyJSON);

// 分组时同时聚合数值列和对应的tooltip列
var grouped = google.visualization.data.group(data, [0],
  {"column": 2, "aggregation": google.visualization.data.sum, "type": "number", "label": data.getColumnLabel(2)},
  {"column": 3, "aggregation": google.visualization.data.first, "type": "string", "label": data.getColumnLabel(3)},
  {"column": 4, "aggregation": google.visualization.data.sum, "type": "number", "label": data.getColumnLabel(4)},
  {"column": 5, "aggregation": google.visualization.data.first, "type": "string", "label": data.getColumnLabel(5)},
  {"column": 6, "aggregation": google.visualization.data.sum, "type": "number", "label": data.getColumnLabel(6)},
  {"column": 7, "aggregation": google.visualization.data.first, "type": "string", "label": data.getColumnLabel(7)},
  {"column": 8, "aggregation": google.visualization.data.sum, "type": "number", "label": data.getColumnLabel(8)},
  {"column": 9, "aggregation": google.visualization.data.first, "type": "string", "label": data.getColumnLabel(9)},
  {"column": 10, "aggregation": google.visualization.data.sum, "type": "number", "label": data.getColumnLabel(10)},
  {"column": 11, "aggregation": google.visualization.data.first, "type": "string", "label": data.getColumnLabel(11)},
  {"column": 12, "aggregation": google.visualization.data.sum, "type": "number", "label": data.getColumnLabel(12)},
  {"column": 13, "aggregation": google.visualization.data.first, "type": "string", "label": data.getColumnLabel(13)},
  {"column": 14, "aggregation": google.visualization.data.sum, "type": "number", "label": data.getColumnLabel(14)},
  {"column": 15, "aggregation": google.visualization.data.first, "type": "string", "label": data.getColumnLabel(15)}
);

// 设置tooltip列的角色
grouped.setColumnProperty(2, 'role', 'tooltip');
grouped.setColumnProperty(4, 'role', 'tooltip');
grouped.setColumnProperty(6, 'role', 'tooltip');
grouped.setColumnProperty(8, 'role', 'tooltip');
grouped.setColumnProperty(10, 'role', 'tooltip');
grouped.setColumnProperty(12, 'role', 'tooltip');
grouped.setColumnProperty(14, 'role', 'tooltip');

var options = {
  tooltip: { isHtml: true },
  height: 500,
  legend: { position: 'top', maxLines: 3 },
  bar: { groupWidth: '75%' },
  isStacked: true,
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(grouped, options);
}

关键修改说明 #

1. 扩展分组逻辑：在google.visualization.data.group中，为每个数值列添加对应的tooltip列聚合，用first聚合器保留分组内第一个tooltip内容（如需合并可替换为自定义聚合函数）。
2. 标记tooltip角色：通过setColumnProperty将分组后的tooltip列标记为tooltip角色，让图表识别这些列作为对应数值条的提示框内容。
3. 保留列标签一致性：聚合时复用原数据的列标签，确保图表图例和提示框显示逻辑正确。

内容的提问来源于stack exchange，提问作者cmill