如何为Google Chart柱状图的各系列标题设置不同颜色？

Google Charts本身并没有提供直接在配置项里给每个系列图例文本单独设置颜色的选项，但我们可以通过监听图表的ready事件，手动修改生成的SVG元素样式来实现这个需求。下面是具体的实现步骤和代码示例：

核心思路 #

1. 正常初始化并绘制你的柱状图
2. 在图表加载完成的ready事件中，定位到每个图例对应的文本元素
3. 逐个给这些文本元素设置自定义颜色

完整代码示例 #

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Category', 'Title1', 'Title2', 'Title3', 'Title4'],
    ['A', 100, 200, 300, 400],
    ['B', 150, 250, 350, 450],
    ['C', 200, 300, 400, 500]
  ]);

  var options = {
    chart: {
      title: 'Sample Chart',
    },
    bars: 'vertical'
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));

  // 监听图表ready事件，修改图例文本颜色
  google.visualization.events.addListener(chart, 'ready', function() {
    // 获取所有图例文本元素（通过text-anchor属性定位，确保只选中图例文本）
    var legendTexts = document.querySelectorAll('#chart_div text[text-anchor="start"]');
    
    // 给每个图例文本设置对应颜色
    if (legendTexts.length >= 4) {
      legendTexts[0].setAttribute('fill', 'red');    // Title1设为红色
      legendTexts[1].setAttribute('fill', 'blue');   // Title2设为蓝色
      legendTexts[2].setAttribute('fill', 'green');  // Title3设为绿色
      legendTexts[3].setAttribute('fill', 'black');  // Title4设为黑色
    }
  });
}

注意事项 #

• 选择器#chart_div text[text-anchor="start"]是基于Google Charts生成的SVG结构来定位的，如果后续Google Charts更新了DOM结构，可能需要调整选择器
• 必须在ready事件中修改样式，因为只有图表完全绘制完成后，这些SVG元素才会存在
• 如果你的图表有更多系列，只需要按顺序扩展颜色设置的逻辑即可

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