javascript - 在 Google Charts 中以不同方式为条形图的条形着色

Question

我正在尝试使用 Google Charts 制作条形图，我想为条形图设置不同的颜色。

根据 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;

我知道我可以使用选项参数来设置不同的颜色，但是当我这样做时，只有列表中的第一种颜色会应用到所有条形。

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”属性来完成，但我不知 Prop 体怎么做。

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

Answer 1

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

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”
因此只应用一种颜色