如何在Google Charts中选择取消列数据并为图例添加选择框控制显示？

我来帮你搞定这两个Google Charts的交互需求，直接上可运行的方案和修改后的代码：

Google Charts本身提供了select事件，能监听用户点击图表列或图例的操作，你可以通过这个事件来实现选择/取消选择列数据的功能。不过结合你第二个需求（图例加选择框），用复选框来控制会更直观，我会在问题2的方案里整合这个能力。

另外，如果你需要通过点击图表元素来切换显示状态，可以监听chart.select()事件，获取选中的行/列信息，然后动态调整数据视图。示例代码片段如下：

google.visualization.events.addListener(chart, 'select', function() {
  var selection = chart.getSelection();
  if (selection.length > 0) {
    // 根据选中元素的系列索引，切换对应系列的显示状态
    var seriesIndex = Math.floor((selection[0].column - 1) / 2);
    var seriesName = Object.keys(seriesStatus)[seriesIndex];
    document.getElementById('checkbox-' + seriesName).checked = !document.getElementById('checkbox-' + seriesName).checked;
    updateChart();
  }
});

Google Charts没有内置的图例复选框，但我们可以手动创建复选框组件，结合DataView来动态过滤要显示的列，从而实现隐藏/指定系列的效果。下面是修改后的完整可运行代码：

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="legend-checkboxes" style="margin-bottom: 10px;"></div> <!-- 复选框容器 -->
<div id="t1"></div>

<script>
google.charts.load('current', {packages: ["corechart"]});
google.charts.setOnLoadCallback(initChart);

// 全局变量存储系列状态和原始数据
var data;
var seriesStatus = {
  T1: true,
  T2: true,
  T3: true,
  T4: true
};

function initChart() {
  // 初始化原始数据
  data = new google.visualization.DataTable();
  data.addColumn('string', 'Title');
  data.addColumn('number', 'T1');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', 'T2');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', 'T3');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', 'T4');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addRows([
    ['Training', 3.02, '3.02', 6.01, '6.01', 3.03, '3.03', 2.91, '2.91']
  ]);

  // 创建图例复选框
  createLegendCheckboxes();
  // 绘制初始图表
  updateChart();
}

function createLegendCheckboxes() {
  var container = document.getElementById('legend-checkboxes');
  var colors = ['#72A5AE','#B5A7D2','#881E13','#381E70'];
  
  // 遍历每个系列，生成对应的复选框和标签
  Object.keys(seriesStatus).forEach(function(seriesName, index) {
    var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = 'checkbox-' + seriesName;
    checkbox.checked = seriesStatus[seriesName];
    // 绑定状态变化事件
    checkbox.addEventListener('change', updateChart);

    var label = document.createElement('label');
    label.htmlFor = checkbox.id;
    label.textContent = seriesName;
    label.style.color = colors[index];
    label.style.marginRight = '15px';

    container.appendChild(checkbox);
    container.appendChild(label);
  });
}

function updateChart() {
  // 同步复选框的状态到全局变量
  Object.keys(seriesStatus).forEach(function(seriesName) {
    seriesStatus[seriesName] = document.getElementById('checkbox-' + seriesName).checked;
  });

  // 构建要显示的列：默认保留第一列（Title）
  var columns = [0];
  // 遍历系列，添加选中的系列列和对应的注释列（每个数据列后紧跟注释列）
  Object.keys(seriesStatus).forEach(function(seriesName, index) {
    if (seriesStatus[seriesName]) {
      var dataColumnIndex = 1 + (index * 2); // T1对应第1列，T2对应第3列，以此类推
      var annotationColumnIndex = dataColumnIndex + 1;
      columns.push(dataColumnIndex);
      columns.push(annotationColumnIndex);
    }
  });

  // 创建DataView过滤列
  var view = new google.visualization.DataView(data);
  view.setColumns(columns);

  // 图表配置
  var options = {
    annotations: {
      textStyle: {
        bold: true,
        italic: true,
        fontSize: 16,
        fontColor: '#FFFFFF',
      }
    },
    legend: {position: 'top', alignment: 'start', maxLines: 2},
    width: 800,
    height: 600,
    colors: ['#72A5AE','#B5A7D2','#881E13','#381E70']
  };

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

  // 可选：绑定图表点击事件，实现点击列切换复选框状态
  google.visualization.events.addListener(chart, 'select', function() {
    var selection = chart.getSelection();
    if (selection.length > 0 && selection[0].column !== null) {
      var seriesIndex = Math.floor((selection[0].column - 1) / 2);
      var seriesName = Object.keys(seriesStatus)[seriesIndex];
      var checkbox = document.getElementById('checkbox-' + seriesName);
      checkbox.checked = !checkbox.checked;
      updateChart();
    }
  });
}
</script>

关键功能说明： #

1. 复选框与图表视觉统一：给每个复选框的标签匹配对应系列的颜色，保持和图表的视觉一致性。
2. 动态数据视图：使用DataView来灵活筛选要显示的列，确保每个数据列和对应的注释列成对添加/移除。
3. 双向交互：既可以通过复选框控制系列显示，也可以点击图表中的列来切换对应系列的显示状态，实现双向同步。
4. 堆叠列适配：因为你的图表是堆叠列类型，隐藏某个系列后，剩余系列会自动调整堆叠比例，无需额外配置。

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