Google堆积条形图颜色 [英] Google Stacked Bar Chart color

问题描述

如何更改堆叠条形图中列的颜色？如果我在MakeBarChart函数中指定了colors属性，它只取第一个参数。并使其他列成为该颜色的较轻版本。这是它的样子;

这是代码;

 函数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'，//必填材质条形图。 '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））;}  

我怎样才能让所有的列都有自己独立的颜色。 解决方案

它们的格式不是正确的。

正确的值为：

或者RGB十六进制值（每个颜色具有2位十六进制值）如'＃00CC88'或

或'＃0C8'或

或有效颜色名称的RGB十六进制值（每种颜色有1位十六进制值）。

因此而不是

 颜色：['＃000'，'＃1111' ，'＃55555'] //错误值（第二和第三个值）
  

尝试

 颜色：['＃11AA77'，'＃999922'，'＃550077'] 
  

或

 颜色：['＃1A7'， '＃992'，'＃507'] 
  

或者您也可以做

 颜色：[ 'red'，'darkgreen'，'yellow'] 
  

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

How can I change the color of the column in a stacked bar chart? If I specify the colors attribute in my MakeBarChart function, it only takes the first parameter. And makes the other columns a lighter version of that color. This is what it looks like;

And this is the code;

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));
}

How can I make the column all have their own separate color.

解决方案

The problem is with your colors values, they are not in a correct RGB format.

Correct values will be :
either RGB hex values (with 2 digit hex value per color) like '#00CC88' or
either RGB hex values (with 1 digit hex value per color) like '#0C8' or
or a valid color name.

so instead of

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

try

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

or

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

or you can also do

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

See a jsfiddle example here : https://jsfiddle.net/rdtome/2vjLc0q0/

这篇关于Google堆积条形图颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！