Javascript 谷歌图表，每个条形的颜色不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6375248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Chart, different color for each bar
提问by jaclerigo
I have this Google Bar Chart:
我有这个谷歌条形图：
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',
});
}
All runs OK, but the thing is, both bars have the same color, and I would like to be able to have different colors for each bar.
一切运行正常，但问题是，两个条形的颜色相同，我希望每个条形都有不同的颜色。
Can anyone help me on this?
谁可以帮我这个事？
采纳答案by Adithya Surampudi
One hacky way to do things is put them all in the same row, and API would assign distinct colors to this. Hence for your example
一种做事的方法是将它们全部放在同一行中，API 会为此分配不同的颜色。因此对于你的例子
function drawChart(){
var data = new google.visualization.DataTable();
data.addColumn('number', 'Value 1');
data.addColumn('number', 'Value 2');
data.addRows(2);
data.setValue(0, 0, 250);
data.setValue(0, 1, 100);
var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(data, {
width: 600,
height: 175,
title: 'Total',
legend: 'none',
});
}
If you need your own colors add this in the chart.draw optionslike,
如果您需要自己的颜色，请在chart.draw 选项中添加它，例如，
colors: ['red','yellow', 'blue'],
If there are too many bars though, this may be a bad option for that please look at
如果条形太多，这可能是一个不好的选择，请查看
http://code.google.com/apis/chart/interactive/docs/reference.html#barformatter
http://code.google.com/apis/chart/interactive/docs/reference.html#barformatter
回答by Whelkaholism
Not sure why no-one mentioned style role columns - I assume they were added after the initial question, but for anyone looking for this now, a better way is:
不知道为什么没有人提到样式角色列 - 我认为它们是在最初的问题之后添加的，但对于现在正在寻找这个的人来说，更好的方法是：
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',
});
}
You can set many other CSS styles to make your charts REALLY ugly.
您可以设置许多其他 CSS 样式，使您的图表非常难看。
https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors
https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors
NOTE that it does not seem to support rgba() specified colors - you have to set opacity on the style role.
请注意，它似乎不支持 rgba() 指定的颜色 - 您必须在样式角色上设置不透明度。
Here's a fiddle:
这是一个小提琴：
SIDENOTE: If you have multiple series, then you need a style role column after each series data column.
旁注：如果您有多个系列，那么您需要在每个系列数据列之后添加一个样式角色列。
Here is another fiddle showing that (with opacity as well): http://jsfiddle.net/v5hfdm6c/1
这是另一个小提琴显示（也带有不透明度）：http: //jsfiddle.net/v5hfdm6c/1
Here is the modified function (left the unmodified one above for clarity)
这是修改后的函数（为了清楚起见，保留了上面未修改的函数）
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',
});
}
}
回答by mpous
Exactly, you have to insert the colors attribute into the options variable.
确切地说，您必须将 colors 属性插入到 options 变量中。
...
var options = {
width: 600,
height: 175,
title: 'Total',
legend: 'none',
colors: ['red', 'green']
};
chart.draw(data, options);
...
回答by Uma Shankar Pandey
Please add this in options:
请在选项中添加：
colors:['red','#009900']
colors:['red','#009900']
Like:
喜欢：
var options = {
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
colors:['red','#009900']
};
回答by Sujal Mandal
Here is my answer. It takes care of converting a array into dataTable
这是我的答案。它负责将数组转换为 dataTable
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Season');
data.addColumn('number', 'Deaths');
data.addColumn({
type: 'string',
role: 'style'
});
var dataArray = new Array();
dataArray[0] = ['Season 1', 1000, "#A0A0A0"]
dataArray[1] = ['Season 2', 1170, "#FF3344"]
dataArray[2] = ['Season 3', 660, "#BCBCBC"]
dataArray[3] = ['Season 4', 1248, "#B3B3B8"]
dataArray[4] = ['Season 5', 14353, "RED"];
var charTitle = "Total deaths in Game of Thrones Series VS Screen Play Time";
var noOfBars = dataArray.length;
data.addRows(noOfBars);
for (var row = 0; row < noOfBars; row++) {
var label=dataArray[row][0];
var value=dataArray[row][1];
var color=dataArray[row][2];
data.setValue(row, 0, label);
data.setValue(row, 1, value);
data.setValue(row, 2, color);
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
width: 600,
height: 300,
title: charTitle,
});
}
google.load("visualization", "1", {
packages: ["corechart"],
callback: function () {
drawChart();
}
});
回答by JMASTER B
For those who are using Pie Chart:
对于那些使用饼图的人：
Add the slices
添加 slices
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300,
slices: {
0: { color: 'yellow' },
1: { color: 'transparent' }
}
};
