为Google Combo Chart创建自定义工具提示

我之前也碰到过类似的需求，默认的工具提示文本确实不够直观，Google Charts提供的tooltip角色功能正好能解决这个问题，咱们一步步来实现：

1. 调整数据结构，添加自定义提示列 #

你需要在数据中新增一列，指定其角色为tooltip，这样图表就会优先显示这列的内容作为工具提示。如果需要HTML格式的提示（比如换行、加粗），还可以设置该列的isHtml属性为true。

假设你的原始数据是类似这样的结构：

const jsonData = [
  ["Category", "Value", "Win"],
  ["A", 652, 85],
  ["B", 720, 90],
  // 其他数据行
];

修改后的数据要加入自定义提示列：

const jsonData = [
  ["Category", "Value", "Win", { role: "tooltip", type: "string", p: { isHtml: true } }],
  ["A", 652, 85, "类别：A<br>总数值：652<br>获胜数：85"],
  ["B", 720, 90, "类别：B<br>总数值：720<br>获胜数：90"],
  // 其他数据行，对应添加自定义提示文本
];

如果不需要HTML格式，纯文本的话可以简化：

const jsonData = [
  ["Category", "Value", "Win", { role: "tooltip" }],
  ["A", 652, 85, "类别A：总数值652，获胜数85"],
  ["B", 720, 90, "类别B：总数值720，获胜数90"],
];

2. 配置图表选项 #

如果用了HTML格式的提示，需要在图表配置选项里开启HTML支持：

const options = {
  // 你的其他配置项（比如图表类型、标题、坐标轴等）
  tooltip: {
    isHtml: true, // 开启HTML工具提示
    trigger: 'both' // 可选：鼠标悬停或点击都触发提示
  }
};

3. 完整示例代码 #

把这些整合到你的加载和绘制逻辑里：

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 处理数据，这里用修改后的jsonData
  const data = google.visualization.arrayToDataTable(jsonData);

  const options = {
    title: '自定义工具提示示例',
    seriesType: 'area', // 阶梯区域图类型
    series: { 1: { type: 'line', lineDashStyle: [4, 4] } }, // 虚线配置
    tooltip: {
      isHtml: true,
      trigger: 'both'
    }
  };

  const chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

额外注意事项 #

• 如果你的数据来自PHP脚本，需要在PHP生成JSON时，为每一行数据添加对应的自定义提示文本列，确保输出的JSON结构和上面的示例一致。
• 自定义提示文本可以根据你的业务需求任意定制，比如加入百分比、额外说明等，HTML格式还能添加样式（比如用<span style="color: #2196F3;">来改变文字颜色）。

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