joo*_*ost 6 html javascript google-visualization
如何更改堆积条形图中列的颜色?如果我在MakeBarChart函数中指定colors属性,它只接受第一个参数.并使其他列成为该颜色的较轻版本.这就是它的样子;

这就是代码;
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));
}Run Code Online (Sandbox Code Playgroud)
如何使列都有自己独立的颜色.
问题在于您的颜色值,它们的 RGB 格式不正确。
正确的值将是:
RGB 十六进制值(每种颜色 2 位十六进制值),如“#00CC88”或
RGB 十六进制值(每种颜色 1 位十六进制值),如“#0C8”或
有效的颜色名称。
所以而不是
colors:['#000','#1111','#55555'] // wrong values (2nd and 3rd values)
Run Code Online (Sandbox Code Playgroud)
尝试
colors:['#11AA77','#999922','#550077']
Run Code Online (Sandbox Code Playgroud)
或者
colors:['#1A7','#992','#507']
Run Code Online (Sandbox Code Playgroud)
或者你也可以这样做
colors:['red','darkgreen','yellow']
Run Code Online (Sandbox Code Playgroud)
请参阅此处的 jsfiddle 示例:https ://jsfiddle.net/rdtome/2vjLc0q0/
| 归档时间: |
|
| 查看次数: |
708 次 |
| 最近记录: |