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

Posted 2021-05-05

我正在使用Google Visualization 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']
]);

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

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

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

答案

我有一个这个答案here的互动演示。

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

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

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'}
  }
};

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

另一答案

如果有人想从json添加颜色系列，我找到了一种方法。我花了很长时间才弄明白，所以如果有人可以使用它，那么就去了。

问题是颜色数组不能是Array类型，但必须是带对象的对象。

从Controller（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;
            });

然后在图表的属性

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*/

        };