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屋!