You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

技术问询:如何修改堆叠分组Google Column Chart的颜色?

修改Google Charts堆叠分组柱状图的颜色

我来给你两种简单有效的方法,直接适配你现有的代码:

方法1:全局统一设置所有系列颜色(最快捷)

在你的options配置对象里添加colors数组,数组里的每一项依次对应图表中A、B、C、D四个系列的颜色,支持十六进制、RGB、RGBA或者直接用颜色名称。

修改后的完整代码示例:

google.load('visualization', '1.1', { 'packages': ['bar'] });
google.setOnLoadCallback(drawStuff);

function drawStuff() {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', 'D'],
    ['2001', 321, 600, 816, 319],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 123, 578],
    ['2004', 197, 536, 613, 298]
  ]);

  var options = {
    isStacked: true,
    vAxis: { viewWindow: { max: 1100, min: 0 } },
    vAxes: { 0: { }, 1: { gridlines: { color: '#cccccc' } } }, // 补全了你未写完的网格线颜色
    colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4'] // 依次对应A、B、C、D的颜色,可按需替换
  };

  // 初始化图表并绘制
  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

方法2:单独配置每个系列的颜色(更灵活)

如果需要给某个系列单独定制颜色,甚至搭配图例标签等其他样式,可以用series对象,索引从0开始对应A(0)、B(1)、C(2)、D(3)系列。

示例代码片段:

var options = {
  isStacked: true,
  vAxis: { viewWindow: { max: 1100, min: 0 } },
  vAxes: { 0: { }, 1: { gridlines: { color: '#cccccc' } } },
  series: {
    0: { color: '#ff6b6b' }, // 给A系列设置红色
    1: { color: '#4ecdc4', labelInLegend: '自定义B系列名称' }, // 同时修改颜色和图例标签
    2: { color: '#45b7d1' }, // C系列用蓝色
    3: { color: '#96ceb4' }  // D系列用淡绿色
  }
};

小提醒

  • 如果你用的是材料设计版的google.charts.Bar,一定要用google.charts.Bar.convertOptions(options)来转换配置,不然有些样式可能不生效哦。
  • 颜色格式非常灵活,比如'red''#f00''rgb(255,0,0)''rgba(255,0,0,0.7)'(带透明度)都可以用。

内容的提问来源于stack exchange,提问作者SliderUK

火山引擎 最新活动