在Google Charts

Question

我正在尝试使用Google Charts制作条形图，我想以不同的方式为条形图上色。

从谷歌图表的文档中，我将以下列格式从后端发送数据：

    {
    "cols": [
    {"id":"","label":"Topping","pattern":"","type":"string"},
    {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms"},{"v":3}]},
        {"c":[{"v":"Onions"},{"v":1}]},
        {"c":[{"v":"Olives"},{"v":1}]},
        {"c":[{"v":"Zucchini"},{"v":1}]},
        {"c":[{"v":"Pepperoni"},{"v":2}]}
      ]
    }

我正在使用ajax调用从我的django后端获取数据，代码如下所示 -

var jsonData = $.ajax({
      url: $('#barchart_values').attr('data-actionurl'),
      dataType: "json",
      async: false
    }).responseText;

我知道我可以使用options参数来设置不同的颜色，但是当我这样做时，只有列表的第一种颜色应用于所有的颜色。

var options = {
      title: "Vegetables",
      legend: { position: 'top' },
      colors: ['green', 'red', 'blue']
    };
    var data = new google.visualization.DataTable(jsonData);
    var chart = new google.visualization.BarChart(document.getElementById('barchart_values'));
    chart.draw(data, options);

在上面的代码中，绿色应用于所有条形。

我想从后端发送颜色，我想我可以使用＆＃34; p＆＃34;属性，但我不知道如何做到这一点。

我想知道是否有某些方法可以将颜色包含在我从后端发送的json数据中。另外，为什么只有选项颜色列表中提供的第一种颜色应用于所有条形图？

Answer 1

您可以使用样式列角色...

＆＃13;

＆＃13;

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var chart = new google.visualization.BarChart(document.getElementById('chart-bar'));
  chart.draw(new google.visualization.DataTable({
    "cols": [
      {"label":"Topping","pattern":"","type":"string"},
      {"label":"Slices","pattern":"","type":"number"},
      {"role":"style","type":"string"}
    ],
    "rows": [
      {"c":[{"v":"Mushrooms"},{"v":3},{"v":'green'}]},
      {"c":[{"v":"Onions"},{"v":1},{"v":'red'}]},
      {"c":[{"v":"Olives"},{"v":1},{"v":'blue'}]},
      {"c":[{"v":"Zucchini"},{"v":1},{"v":'purple'}]},
      {"c":[{"v":"Pepperoni"},{"v":2},{"v":'orange'}]}
    ]
  }));
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-bar"></div>

＆＃13;

＆＃13;

＆＃13;

colors选项中的每种颜色都适用于数据中的每个系列 样本数据中只有一个系列"Slices"
因此只应用了一种颜色