如何让Google Charts折线图工具提示显示同一X轴对应的所有Y值？

有，Google Charts内置了配置项可以直接实现这个需求，无需编写大量自定义工具提示函数。关键是设置工具提示的mode为index，这样鼠标悬停时会自动显示当前X轴位置对应的所有系列的Y值。

核心配置说明 #

在图表的options中添加以下配置：

tooltip: {
  mode: 'index',
  trigger: 'both' // 可选，支持鼠标悬停或点击触发，默认仅悬停触发
}

• mode: 'index'：强制工具提示展示当前X轴索引对应的所有系列数据，也就是同一X值下的所有折线Y值。
• trigger: 'both'：可选配置，让工具提示在鼠标悬停或点击时都能触发，若不需要点击触发可以省略。

完整示例代码 #

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', '时间');
  data.addColumn('number', '系列A');
  data.addColumn('number', '系列B');

  data.addRows([
    [1,  37.8, 80.8],
    [2,  30.9, 69.5],
    [3,  25.4,   57],
    [4,  11.7, 18.8],
    [5,  11.9, 17.6],
    [6,   8.8, 13.6],
    [7,   7.6, 12.3],
    [8,  12.3, 29.2],
    [9,  16.9, 42.9],
    [10, 12.8, 30.9]
  ]);

  var options = {
    chart: {
      title: '双折线示例'
    },
    width: 900,
    height: 500,
    // 关键配置
    tooltip: {
      mode: 'index',
      trigger: 'both'
    }
  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));
  chart.draw(data, google.charts.Line.convertOptions(options));
}

将上述代码嵌入页面后，鼠标悬停折线时，工具提示会自动展示对应X轴的两个Y值，完全不需要手动为每个数据点编写自定义提示内容。

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