技术问询:如何修改堆叠分组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




