如何在Google Charts中选中折线时显示所有提示框

Google Charts本身没有直接的配置项支持点击折线显示全系列提示框，得通过事件监听+手动触发的方式实现，具体步骤如下：

• 首先在图表配置里开启系列选择模式：把selectionMode设为'series'，这样点击折线会选中整个数据系列。
• 监听图表的select事件，在事件回调里处理选中/取消选中的逻辑：
  1. 当有系列被选中时，遍历该系列的所有数据点，手动触发每个点的onmouseover事件，强制显示提示框。
  2. 当取消选中时，触发onmouseout事件隐藏所有提示框。

下面是完整的代码示例：

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2014',  1000,      400],
    ['2015',  1170,      460],
    ['2016',  660,       1120],
    ['2017',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' },
    selectionMode: 'series', // 开启系列选择模式
    tooltip: {
      trigger: 'both' // 保留悬停触发，同时支持手动触发
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  var previousSelection = null;

  // 监听图表选择事件
  google.visualization.events.addListener(chart, 'select', function() {
    var selection = chart.getSelection();
    var chartDiv = chart.getContainer();
    
    // 清除之前显示的提示框
    if (previousSelection) {
      previousSelection.forEach(function(sel) {
        var dataPoint = chartDiv.querySelector(`[data-row="${sel.row}"][data-column="${sel.column}"]`);
        if (dataPoint) {
          dataPoint.dispatchEvent(new MouseEvent('mouseout', {bubbles: true}));
        }
      });
      previousSelection = null;
    }

    // 处理新选中的系列
    if (selection.length > 0) {
      var seriesColumn = selection[0].column;
      var newSelection = [];
      // 遍历当前系列的所有数据点
      for (var row = 0; row < data.getNumberOfRows(); row++) {
        var selObj = {row: row, column: seriesColumn};
        newSelection.push(selObj);
        var dataPoint = chartDiv.querySelector(`[data-row="${row}"][data-column="${seriesColumn}"]`);
        if (dataPoint) {
          // 触发鼠标悬停事件显示提示框
          dataPoint.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}));
        }
      }
      previousSelection = newSelection;
      // 保持系列选中状态（可选）
      chart.setSelection(selection);
    }
  });

  chart.draw(data, options);
}

关键说明 #

• 利用chart.getContainer()获取图表DOM容器，通过data-row和data-column属性定位到每个数据点的DOM元素。
• 用dispatchEvent手动触发mouseover/mouseout事件来控制提示框的显示和隐藏。
• 记录previousSelection是为了在切换选中系列时，先隐藏之前显示的提示框，避免重叠。

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