Google Charts分组柱状图：如何让同色柱子仅在图例显示一次？

当然有办法实现这个需求！因为你的数据结构里只有一个数据系列（Inicio），Google Charts的默认图例是基于数据列生成的，没法直接按颜色拆分出三个独立的图例项。所以我们可以通过自定义图例来达成目标，下面是具体的实现步骤和代码示例：

步骤1：添加自定义图例的HTML容器 #

先在页面里加一个用来放自定义图例的容器，和图表容器放在一起就行：

<div id="custom-legend" style="margin-bottom: 10px;"></div>
<div id="chart"></div>

步骤2：修改Google Charts代码，实现自定义图例 #

我们会在图表绘制完成后，手动创建三个对应颜色的图例项，还可以给图例加上点击交互（点击切换对应颜色柱子的显示/隐藏）。完整代码如下：

var datainfo = [
  // 新增visibility角色列，用来控制柱子的显示/隐藏状态
  ['Hora', 'Inicio', {role:'style'}, {role:'visibility'}],
  ['-4:00', 10, 'blue', 'visible'],
  ['-3:00', 10, 'blue', 'visible'],
  ['0:00', 10, 'green', 'visible'],
  ['3:00', 10, 'red', 'visible'],
  // 你的其他数据行...
];

google.charts.setOnLoadCallback(function(){
  var data = google.visualization.arrayToDataTable(datainfo);
  var options = {
    legend:{ position:'none' }, // 隐藏默认的图例
    width: obj.clientWidth,
    height: 400,
    title: 'Modulos quirurgicos',
    chartArea: { width: '90%' },
    hAxis: { title: 'Hora', minValue: 0 },
    vAxis: { title: 'Numero de modulos' },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("chart"));

  // 先绘制图表
  chart.draw(data, options);

  // 开始创建自定义图例
  var legendContainer = document.getElementById('custom-legend');
  // 定义我们要显示的三个图例项
  var legendItems = [
    {color: 'blue', name: 'Blue'},
    {color: 'green', name: 'Green'},
    {color: 'red', name: 'Red'}
  ];

  // 逐个创建图例元素
  legendItems.forEach(function(item) {
    var legendItem = document.createElement('div');
    legendItem.style.display = 'inline-block';
    legendItem.style.marginRight = '25px';
    legendItem.style.cursor = 'pointer';
    legendItem.style.alignItems = 'center';

    // 颜色块
    var colorBlock = document.createElement('span');
    colorBlock.style.display = 'inline-block';
    colorBlock.style.width = '18px';
    colorBlock.style.height = '18px';
    colorBlock.style.backgroundColor = item.color;
    colorBlock.style.marginRight = '8px';
    colorBlock.style.borderRadius = '2px';

    // 图例文字
    var label = document.createElement('span');
    label.textContent = item.name;
    label.style.fontSize = '14px';

    // 组装并添加到容器
    legendItem.appendChild(colorBlock);
    legendItem.appendChild(label);

    // 给图例项添加点击交互：切换对应颜色柱子的显示/隐藏
    legendItem.addEventListener('click', function() {
      // 遍历所有数据行，找到对应颜色的条目，切换visibility状态
      for (var i = 0; i < data.getNumberOfRows(); i++) {
        if (data.getValue(i, 2) === item.color) {
          var currentState = data.getValue(i, 3);
          data.setValue(i, 3, currentState === 'visible' ? 'hidden' : 'visible');
        }
      }
      // 重绘图表
      chart.draw(data, options);
      // 切换图例项的透明度，提示当前状态
      legendItem.style.opacity = data.getValue(i, 3) === 'visible' ? '1' : '0.5';
    });

    legendContainer.appendChild(legendItem);
  });
});

关键细节说明： #

• 我们给数据源新增了visibility角色列，这是Google Charts用来控制单个数据点显示/隐藏的官方方式，比手动修改样式更可靠
• 自定义图例用原生HTML/CSS实现，你可以完全自定义它的样式（比如排列方式、颜色块大小、字体等）
• 如果不需要交互功能，只需要静态展示图例的话，删掉点击事件部分就行，只保留创建图例元素的代码

这样就能完美实现只显示Green、Blue、Red三个颜色选项的图例啦！

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