我有这个 Google 条形图:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', '');
data.addRows(2);
data.setValue(0, 0, 'Value 1');
data.setValue(0, 1, 250);
data.setValue(1, 0, 'Value 2');
data.setValue(1, 1, 100);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
width: 400,
height: 175,
title: 'Total',
legend: 'none',
});
}
一切运行正常,但问题是,两个条形具有相同的颜色,我希望每个条形具有不同的颜色。
谁能帮我解决这个问题?
最佳答案
不知道为什么没有人提到样式 Angular 色列 - 我假设它们是在最初的问题之后添加的,但对于现在正在寻找这个的人来说,更好的方法是:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });
data.addRows(2);
data.setValue(0, 0, 'Value 1');
data.setValue(0, 1, 250);
data.setValue(0, 2, 'rgb(200, 20, 60)');
data.setValue(1, 0, 'Value 2');
data.setValue(1, 1, 100);
data.setValue(1, 2, 'rgb(20, 200, 60)');
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
width: 400,
height: 175,
title: 'Total',
legend: 'none',
});
}
您可以设置许多其他 CSS 样式,使您的图表变得非常丑陋。
https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors
请注意,它似乎不支持 rgba() 指定的颜色 - 您必须在样式 Angular 色上设置不透明度。
这是一个 fiddle :
旁注:如果您有多个系列,那么您需要在每个系列数据列之后添加一个样式 Angular 色列。
这是另一个 fiddle (也有不透明度):http://jsfiddle.net/v5hfdm6c/1
这是修改后的函数(为了清楚起见,上面保留了未修改的函数)
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });
data.addRows(2);
var i = 0;
data.setValue(0, i++, 'Value 1');
data.setValue(0, i++, 200);
data.setValue(0, i++, 'color:rgb(200, 20, 60); opacity:0.5');
data.setValue(0, i++, 250);
data.setValue(0, i++, 'rgb(200, 20, 60)');
i = 0;
data.setValue(1, i++, 'Value 2');
data.setValue(1, i++, 120);
data.setValue(1, i++, 'color:rgb(20, 200, 60); opacity:0.5');
data.setValue(1, i++, 100);
data.setValue(1, i++, 'rgb(20, 200, 60)');
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
width: 400,
height: 175,
title: 'Total',
legend: 'none',
});
关于javascript - 谷歌图表,每个条形不同的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6375248/