javascript Google Visualization 堆积条形图：每个值的颜色和标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31022421/
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 Visualization stacked bar chart: colors and labels for each value
提问by Alex
I'm using Google Visulaization API to render a chart showing a single row with multiple values, like this:
我正在使用 Google Visulaization API 来呈现显示具有多个值的单行的图表，如下所示：
with the following code:
使用以下代码：
var data = google.visualization.arrayToDataTable([
['', '0%', '25%', '50%', '75%', '100%', {role: 'annotation'}],
['Mood', 3, 7, 20, 25, 45, '']
]);
var options = {
isStacked: true,
hAxis: { minValue: 0 }
}
var chart = new google.visualization.BarChart(document.getElementById('mood_chart'));
chart.draw(data, options);
Now I would like to customize the colors and add a label to every piece of the row.
现在我想自定义颜色并为行的每一部分添加一个标签。
If I do this:
如果我这样做：
var data = google.visualization.arrayToDataTable([
['', '0%', '25%', '50%', '75%', '100%', {role: 'annotation'}, {role: 'style'}],
['Mood', 3, 7, 20, 25, 45, 'ABC', '#f50']
]);
Then this only applies to the last value: (note the legend has also the wrong color)
那么这只适用于最后一个值：（注意图例也有错误的颜色）
And if I put an array of strings instead of a single label an error is given.
如果我放置一个字符串数组而不是单个标签，则会出现错误。
Is it possible to do what I am trying to do? How?
有可能做我想做的事吗？如何？
回答by nbering
I have an interactive demo for this answer here.
我在这里有一个针对这个答案的交互式演示。
The simple answer is that the annotation and style columns of the data table apply to the data column before them. Add annotation columns after each data column to add annotations to each value.
简单的答案是数据表的注释和样式列适用于它们之前的数据列。在每个数据列之后添加注释列以向每个值添加注释。
This is also why your colors differ from your legend. To apply colors to a series you do that from your options object. The style role of the data table affects an individual value without changing the option for the whole series.
这也是您的颜色与图例不同的原因。要将颜色应用于系列，您可以从选项对象执行此操作。数据表的样式角色会影响单个值，而不会更改整个系列的选项。
var data = google.visualization.arrayToDataTable([
['', '0%', {role: 'annotation'}, '25%', {role: 'annotation'},
'50%', {role: 'annotation'}, '75%', {role: 'annotation'},
'100%', {role: 'annotation'}],
['Mood', 3, 'ABC', 7, 'DEF', 20, 'GHI', 25, 'JKL', 25, 'MNO']
]);
For assigning colors manually your options will look something like this:
对于手动分配颜色，您的选项将如下所示：
var options = {
isStacked: true,
hAxis: {
minValue: 0
},
series: {
0:{color:'#222'},
1:{color:'#555'},
2:{color:'#888'},
3:{color:'#AAA'},
4:{color:'#EEE'}
}
};
My colors were just random greys because I can calculate the colors in my head that way. The series index is independant of the data table column, so it just assigns indexes to columns with data values.
我的颜色只是随机的灰色，因为我可以这样计算我头脑中的颜色。系列索引与数据表列无关，因此它只是为具有数据值的列分配索引。
回答by Johnny Koch Petersen
In case someone would like to add the color series from json, i found a way to do that. It took quite some time to figure it out for me so here goes if anyone can use it.
如果有人想从 json 添加颜色系列，我找到了一种方法。我花了很长时间才弄明白，所以如果有人可以使用它，那就去吧。
Problem is that arrays of colors cannot be of type Array but must be object with objects.
问题是颜色数组不能是 Array 类型，而必须是带有对象的对象。
Fetching colors from Controller (ASP.Net MVC):
从控制器 (ASP.Net MVC) 获取颜色：
/*array for colors to be convertet later*/
var mycolors = new Array();
function getColors() {
var postData = {};
postData.Ids = {1,2,3};
$.ajax({
type: "POST",
url: "@Url.Action("GoogleStackedBarchartColors", "MyController")",
data: postData,
dataType: "text",
success: function (d, status, request) {
/*some logging*/
console.log(d);
console.log($.parseJSON(d));
var colors = $.parseJSON(d);
/*I change the Type to object*/
mycolors.__proto__ = Object; /*The magic part*/
var i = 0;
colors.forEach(function (element) {
mycolors[i] = element;
i = i + 1;
});
And then in properties of the chart
然后在图表的属性中
var options = {
width: '100%',
height: 500,
bar: { groupWidth: '75%' },
bars: 'vertical',
legend: { 'position': 'top', maxLines: 3 },
isStacked: 'true',
series: mycolors /*Here we have the object containing colors*/
};
