【问题标题】:Google Stacked Bar Chart color谷歌堆积条形图颜色
【发布时间】:2015-05-19 15:35:30
【问题描述】:

如何更改堆积条形图中列的颜色?如果我在 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));
}

我怎样才能使列都有自己单独的颜色。

【问题讨论】:

    标签: javascript html google-visualization


    【解决方案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/

    【讨论】:

    • 谢谢!我已经将它切换为柱形图,但很高兴知道它也可以作为条形图。