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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google Visualization堆积条形图:每个值的颜色和标签相关的知识,希望对你有一定的参考价值。

我正在使用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*/

        };

以上是关于Google Visualization堆积条形图:每个值的颜色和标签的主要内容,如果未能解决你的问题,请参考以下文章

将堆积条形图转换为 100% 比例堆积条形图

spss如何删除堆积条形图中的某块数据

spss如何删除堆积条形图中的某块数据

带有分组条形的熊猫堆积条形图[重复]

使用 ggplot2 制作堆积条形图

Pandas 并排堆积条形图