Google Charts点击图例仅显示对应数据系列的技术咨询

需求：使用Google Charts时，实现点击指定图例仅显示该图例对应的数据系列，隐藏其余所有系列。现有代码实现的是点击图例隐藏该系列的效果，需要修改代码达成需求。

修改后的完整事件监听代码 #

google.visualization.events.addListener(chart, 'select', function () {
  var sel = chart.getSelection();
  if (sel.length > 0 && sel[0].row === null) {
    var targetCol = sel[0].column;
    // 检查当前是否已经仅显示目标系列
    var isOnlyTargetVisible = columns.every(function(col, index) {
      // 第一列（类别列）一直显示，目标列显示，其他列隐藏
      return index === 0 || (index === targetCol && col === targetCol) || (index !== targetCol && typeof col === 'object');
    });

    if (isOnlyTargetVisible) {
      // 恢复全部系列显示
      columns.forEach(function(col, index) {
        if (index > 0) {
          columns[index] = index;
          series[index - 1].color = null;
        }
      });
    } else {
      // 仅显示目标系列，隐藏其他所有系列
      columns.forEach(function(col, index) {
        if (index === 0) {
          // 保留类别列
          columns[index] = index;
        } else if (index === targetCol) {
          // 显示目标系列
          columns[index] = index;
          series[index - 1].color = null;
        } else {
          // 隐藏其他系列
          columns[index] = {
            label: data.getColumnLabel(index),
            type: data.getColumnType(index),
            calc: function() {
              return null;
            }
          };
          // 灰化图例
          series[index - 1].color = '#cccccc';
        }
      });
    }

    var view = new google.visualization.DataView(data);
    view.setColumns(columns);
    chart.draw(view, options);
  }
});

关键修改说明 #

• 切换逻辑调整：新增状态判断，若当前已仅显示点击的系列，再次点击则恢复全部显示；否则只保留目标系列显示，隐藏其余所有系列。
• 批量处理列状态：遍历所有数据列（跳过第一列类别列），统一设置显示/隐藏状态，替代原有的单列切换逻辑。
• 图例样式同步：隐藏的系列图例设置为灰色，显示的系列恢复默认颜色，提升视觉反馈。

注意事项 #

• 确保columns和series数组在事件监听外已正确初始化：columns初始值应为[0, 1, 2, ...]（对应数据的列索引），series初始值应为与数据系列数量匹配的空对象数组（如[{}, {}, ...]）。
• 代码默认第一列为类别列并始终显示，若你的图表结构不同，需调整index === 0的判断条件。

内容的提问来源于stack exchange，提问作者vangara venkat rock star venka