如何用Series实现Google Material Column Chart最后一列条形变色且隐藏图例

嗨，完全理解作为Google Chart新手的困惑，这问题一点都不基础，咱们一步步来搞定它！

你的核心需求是：给Material Column Chart最后一列的两个条形设置不同自定义颜色，且这些颜色不显示在图例中。结合你提到的series配置，其实更适合用**样式角色（Style Role）**来实现单个单元格的颜色定制，同时保持图例的原有样式，具体方案如下：

核心思路 #

Material Column Chart的图例是基于「系列（Series）」来展示颜色的，我们不需要修改整个系列的默认颜色，只需要给最后一列（对应数据的最后一行）的两个条形单独设置样式，这样图例依然显示系列的默认颜色，不会出现自定义的新颜色。

完整代码示例 #

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

function drawChart() {
  // 构造数据：注意添加两个「样式角色」列，分别对应两个系列
  var data = google.visualization.arrayToDataTable([
    ['类别', '系列A', '系列B', 
     {role: 'style', type: 'string'},  // 对应系列A的样式列
     {role: 'style', type: 'string'}   // 对应系列B的样式列
    ],
    ['类别1', 40, 50, '', ''],
    ['类别2', 35, 45, '', ''],
    ['类别3', 55, 60, '', ''],
    ['最后一列', 28, 32, '#e74c3c', '#2ecc71']  // 给最后一行的两个条形设置自定义颜色
  ]);

  var options = {
    chart: {
      title: '自定义颜色示例'
    },
    bars: 'vertical',
    legend: {position: 'top'},
    // 保持系列的默认配置，不修改color属性，确保图例显示原有颜色
    series: {
      0: {},
      1: {}
    }
  };

  // 实例化Material Column Chart，注意转换选项
  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

关键细节解释 #

1. 样式角色列的作用：
   我们在数据中添加了两个style角色的列，分别对应两个系列。只有需要自定义颜色的单元格（最后一行的两个值）填写颜色值（支持十六进制、RGB、颜色名称），其他单元格留空即可继承系列默认颜色。

2. 图例不显示自定义颜色的原因：
   图例的颜色是由series配置中的color属性决定的，我们没有修改这两个系列的color，所以图例依然显示默认的系列颜色，不会出现我们给最后一行设置的红、绿颜色。

3. Material Chart的选项转换：
   因为使用的是Material风格的图表（google.charts.Bar），需要用google.charts.Bar.convertOptions()转换配置选项，确保所有属性正常生效。

如果还有细节不清楚，随时问哦～

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