Google Visualization堆积条形图:每个值的颜色和标签

Question

我正在使用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([
    ['', '0%', '25%', '50%', '75%', '100%', {role: 'annotation'}, {role: 'style'}],
    ['Mood', 3, 7, 20, 25, 45, 'ABC', '#f50']
]);

那么这仅适用于最后一个值:(注意图例也有错误的颜色)

如果我放置一个字符串数组而不是一个标签,则会给出错误.

有可能做我想做的事吗？怎么样？

Answer 1

我在这里有一个关于这个答案的互动演示.

简单的答案是数据表的注释和样式列适用于它们之前的数据列.在每个数据列之后添加注释列,以向每个值添加注释.

这也是您的颜色与传奇不同的原因.要将颜色应用于系列,请从选项对象执行此操作.数据表的样式角色会影响单个值,而不会更改整个系列的选项.

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']
]);

要手动分配颜色,您的选项将如下所示:

var options = {
  isStacked: true,
  hAxis: {
    minValue: 0
  },
  series: {
    0:{color:'#222'},
    1:{color:'#555'},
    2:{color:'#888'},
    3:{color:'#AAA'},
    4:{color:'#EEE'}
  }
};

我的颜色只是随机灰色,因为我可以用这种方式计算我头脑中的颜色.系列索引独立于数据表列,因此它只是将索引分配给具有数据值的列.