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

Question

我正在使用 Google 可视化 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

我有这个答案的交互式演示 here。

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

这也是您的颜色与图例不同的原因。要将颜色应用于系列，您可以从选项对象中进行。数据的样式角色 table 影响单个值而不改变整个系列的选项。

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

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

Answer 2

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

问题是颜色数组不能是 Array 类型，而必须是 object with objects。

正在从控制器中获取颜色 (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 可视化堆积条形图：每个值的颜色和标签

Google Visualization stacked bar chart: colors and labels for each value

javascript

charts

google-api

google-visualization