在 Google Charts 中为 Barchart 的条形着色不同

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

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

我想从后端发送颜色，我想我可以使用“p”属性来完成，但我不知道具体怎么做。

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

Answer 1

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

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

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

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