我正在尝试使用 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”属性来完成，但我不知道具体怎么做。
您可以使用样式列角色...
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"
因此只应用了一种颜色
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句