gannt图形由google bar chart形成:每个bar的颜色不同 [英] gannt chart formed by google bar chart: different color to each bar
问题描述
我使用Google图表编写了以下类型的甘特图,但我想为每个栏分配不同的颜色。现在在我的情况,因为我给一个透明的颜色分隔符,我不明白我如何可以分配不同的颜色到每个剩余的栏。
I have the following sort of gantt chart coded up using Google Charts, but I would like to assign different color to each bar. Now in my case since I am assigning a transparent color to spacer , I dont understand how I can assign a different color to each remaining bar.
这可能归结为在不同的栏中指定不同颜色的相同系列。
This probably comes down to assigning the same series in different bars different colors.
修复此问题?
http://jsfiddle.net / bootkick / hp2yr /
google.load('visualization', '1', {
packages: ['corechart']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('timeofday', 'spacer');
data.addColumn('timeofday', 'Runtume');
data.addRows([
['PIPE', [5, 0, 0, 0],
[7, 30, 0, 0]
],
['CNI', [6, 0, 0, 0],
[12, 30, 0, 0]
],
['PEVC', [11, 0, 0, 0],
[17, 30, 0, 0]
]
]);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, {
isStacked: true,
width: 900,
height: data.getNumberOfRows() * 80,
title: 'Host Runtimes',
vAxis: {
title: 'Content',
titleTextStyle: {
color: 'black'
}
},
series: {
0: {
visibleInLegend: false,
color: 'transparent'
}
}
});
/*chart.draw(data, {isStacked: true,
series: [
{color: 'blue', visibleInLegend: false},
{color: 'red', visibleInLegend: false}
]
});*/
}
感谢
推荐答案
希望theyd创建一个google甘特图表
Its a nasty way of doing it. Wish theyd make a google gantt chart
google.load('visualization', '1', {
packages: ['corechart']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('timeofday', 'spacer');
data.addColumn('timeofday', 'Runtime');
data.addColumn('timeofday', 'Runtime');
data.addColumn('timeofday', 'Runtime');
data.addColumn('timeofday', 'Runtime');
data.addRow(['PIPE', [3, 0, 0],
[4, 30, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
]);
data.addRow(['CNI', [1, 0, 0],
[0, 0, 0],
[7, 30, 0],
[0, 0, 0],
[0, 0, 0]
]);
data.addRow(['PEVC', [7, 0, 0],
[0, 0, 0],
[0, 0, 0],
[1, 0, 0],
[0, 0, 0]
]);
data.addRow(['MA', [7, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[1, 0, 0]
]);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, {
isStacked: true,
width: 900,
height: data.getNumberOfRows() * 60,
title: 'Host Runtimes',
vAxis: {
title: 'Content',
titleTextStyle: {
color: 'black'
}
},
series: {
0: {
visibleInLegend: false,
color: 'transparent'
},
1: {
visibleInLegend: false,
color: 'red'
},
2: {
visibleInLegend: false,
color: 'green'
},
3: {
visibleInLegend: false,
color: 'blue'
},
4: {
visibleInLegend: false,
color: 'yellow'
},
5: {
visibleInLegend: false,
color: 'cyan'
},
6: {
visibleInLegend: false,
color: 'pink'
},
7: {
visibleInLegend: false,
color: 'silver'
}
}
});
}
a href =http://jsfiddle.net/bootkick/hp2yr/9/ =nofollow> http://jsfiddle.net/bootkick/hp2yr/9/
See it in action here-: http://jsfiddle.net/bootkick/hp2yr/9/
这篇关于gannt图形由google bar chart形成:每个bar的颜色不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!