我的数据格式如下，下面只是一个示例
var data = google.visualization.arrayToDataTable([
['Medium', 'Expenses'],
['Twitter', 400],
['Facebook', 460],
['Youtube', 1120],
['Instagram', 540]
]);
我想遍历记录并为每个平台赋予适当的颜色。我知道可以为以下列完成此操作：
var view = new google.visualization.DataView(data);
var colors = [];
for (var i = 1; i < view.getNumberOfColumns(); i++) {
switch (view.getColumnLabel(i)) {
case "Twitter":
colors = colors.concat(["#26CEFF"]);
break;
}
我通过以下选项将其提供给图表：
var options = {
colors: colors
}
var chart = new google.visualization.PieChart(Div);
chart.draw(view, options);
但是我无法遍历所有行以实现相同的功能。帮助表示赞赏。
注意：创建数据表时，我无法添加color属性。我仅在创建视图或数据表后必须执行功能。
对于饼图，可以使用->根据第一列的值data.getNumberOfRows()
构建colors数组->Medium
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Medium', 'Expenses'],
['Twitter', 400],
['Facebook', 460],
['Youtube', 1120],
['Instagram', 540]
]);
var colors = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
switch (data.getValue(i, 0)) {
case 'Twitter':
colors.push('#26CEFF');
break;
case 'Facebook':
colors.push('blue');
break;
case 'Youtube':
colors.push('red');
break;
case 'Instagram':
colors.push('green');
break;
}
}
var options = {
colors: colors
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>对于柱形图或条形图，该colors选项将无效。
如果只有一个系列->'Expenses'
相反，需要'style'在数据表/视图中使用角色。
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Medium', 'Expenses'],
['Twitter', 400],
['Facebook', 460],
['Youtube', 1120],
['Instagram', 540]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
var color;
switch (dt.getValue(row, 0)) {
case 'Twitter':
color = '#26CEFF';
break;
case 'Facebook':
color = 'blue';
break;
case 'Youtube':
color = 'red';
break;
case 'Instagram':
color = 'green';
break;
}
return color;
},
type: 'string',
role: 'style'
}]);
var options = {
legend: 'none'
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(view, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句