Google 堆积条形图颜色

Question

如何更改堆积条形图中的柱形颜色？如果我在我的 MakeBarChart 函数中指定颜色属性，它只需要第一个参数。并使其他列成为该颜色的较浅版本。这是它的样子；

这是代码；

function MakeBarChart(tmpData)
{ 
 var barArray = [];
 barArray.push(['', 'Open', 'Wachten', 'Opgelost']);
   for (key in tmpData) {
    if (tmpData.hasOwnProperty(key)) {
   barArray.push(['Week' + key, tmpData[key]['active'], tmpData[key]['waiting'], tmpData[key]['closed']])
    }
   }

 var data = google.visualization.arrayToDataTable(
  barArray
 );
 
 var options = {
  chart: {
  title: 'Incidenten per week',
  subtitle: '',
     'width':450,
     'height':300,
    },
    bars: 'vertical', // Required for Material Bar Charts.
  'backgroundColor':{ fill:'transparent' },
  isStacked: true,
  colors:['#000','#1111','#55555']
 };

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

如何让所有的列都有自己独立的颜色。

Answer 1

问题出在您的颜色值上，它们的 RGB 格式不正确。

正确的值为：
RGB 十六进制值（每种颜色有 2 位十六进制值），如“#00CC88”或
RGB 十六进制值（每种颜色具有 1 位十六进制值），如“#0C8”或
或有效的颜色名称。

所以而不是

colors:['#000','#1111','#55555'] // wrong values (2nd and 3rd values)

尝试

colors:['#11AA77','#999922','#550077']

或

colors:['#1A7','#992','#507']

或者你也可以

colors:['red','darkgreen','yellow']

在此处查看 jsfiddle 示例：https://jsfiddle.net/rdtome/2vjLc0q0/

Google 堆积条形图颜色

Google Stacked Bar Chart color

html

javascript

google-visualization