我正在使用Google Visulaization API渲染显示包含多个值的单行的图表,如下所示：
使用以下代码：
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);
如果我这样做：
var data = google.visualization.arrayToDataTable([
['',{role: 'annotation'},{role: 'style'}],'ABC','#f50']
]);
那么这仅适用于最后一个值:(注意图例也有错误的颜色)
有可能做我想做的事吗？怎么样？
解决方法
我有一个关于这个答案
here的互动演示.
简单的答案是数据表的注释和样式列适用于它们之前的数据列.在每个数据列之后添加注释列,以向每个值添加注释.
这也是您的颜色与传奇不同的原因.要将颜色应用于系列,请从选项对象执行此操作.数据表的样式角色会影响单个值,而不会更改整个系列的选项.
var data = google.visualization.arrayToDataTable([ ['','DEF','GHI','JKL','MNO'] ]);
要手动分配颜色,您的选项将如下所示：
var options = {
isStacked: true,hAxis: {
minValue: 0
},series: {
0:{color:'#222'},1:{color:'#555'},2:{color:'#888'},3:{color:'#AAA'},4:{color:'#EEE'}
}
};
我的颜色只是随机灰色,因为我可以用这种方式计算我头脑中的颜色.系列索引独立于数据表列,因此它只是将索引分配给具有数据值的列.
