我有一个用于饼图的数据表,我需要根据行中的值设置切片的颜色。例如,我有一个按类型划分的汽车销售表(例如租赁,现金,财务),我想为每一个指定颜色。在文档中,似乎可以使用条形图执行此操作,但我似乎无法使用切片执行此操作。我尝试了以下方法:
var pieChart = new google.visualization.ChartWrapper({
options : {
...
slices: [{color: 'black'}, {color: 'green'}, {color: 'red'}]
}
});
颜色已呈现,但我想为black
指定lease
。关于如何让它发挥作用的任何想法?
答案 0 :(得分:5)
slices
数组中的颜色应与数据表中的行的顺序相同
所以,使用以下行......
data.addRows([
['Cash', 5],
['Finance', 20],
['Lease', 15]
]);
对于'Lease'
为黑色,它应该是数组中的最后一种颜色
slices: [{color: 'green'}, {color: 'red'}, {color: 'black'}]
如果行的顺序未知,您可以动态设置颜色
使用对象为颜色创建地图
// create color map
var colors = {
'Cash': 'green',
'Finance': 'red',
'Lease': 'black'
};
然后根据数据表中的值
构建切片数组// build slices
var slices = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
slices.push({
color: colors[data.getValue(i, 0)]
});
}
请参阅以下工作代码段...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'sales');
data.addColumn('number', 'count');
data.addRows([
['Cash', 5],
['Finance', 20],
['Lease', 15]
]);
data.sort([{column: 1, desc: true}]);
// create color map
var colors = {
'Cash': 'green',
'Finance': 'red',
'Lease': 'black'
};
// build slices
var slices = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
slices.push({
color: colors[data.getValue(i, 0)]
});
}
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
chart.draw(data, {
slices: slices
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>