Charts 谷歌条形图形成的gannt图表:每个条形图的颜色不同
我用谷歌图表编码了下面的甘特图,但我想给每个条指定不同的颜色。现在在我的例子中,因为我要为间隔指定一个透明的颜色,我不明白如何为每个剩余的条指定不同的颜色 这可能归结为在不同的条中为同一系列指定不同的颜色 有人能帮我修一下吗Charts 谷歌条形图形成的gannt图表:每个条形图的颜色不同,charts,bar-chart,google-visualization,gantt-chart,Charts,Bar Chart,Google Visualization,Gantt Chart,我用谷歌图表编码了下面的甘特图,但我想给每个条指定不同的颜色。现在在我的例子中,因为我要为间隔指定一个透明的颜色,我不明白如何为每个剩余的条指定不同的颜色 这可能归结为在不同的条中为同一系列指定不同的颜色 有人能帮我修一下吗 谢谢这是一种令人讨厌的做法。希望他们能做一个谷歌甘特图 google.load('visualization', '1', { packages: ['corechart'] }); google.setOnLoadCallback(drawChart); functi
谢谢这是一种令人讨厌的做法。希望他们能做一个谷歌甘特图
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'
}
}
});
}
在这里看到它的作用-:
每列数据都有不同的颜色。如果将第一列设置为间隔符,然后编写循环以使用每个系列的新列重新排列数据表,则可以切换每个系列的颜色。一张你正在寻找的图片会很有帮助。
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'
}
}
});
}