我有一个用于饼图的数据表,我需要根据一行的值设置切片的颜色。例如,我有一张按类型的汽车销售表(例如租赁,现金,金融),我想为每种颜色指定颜色。在文档中,似乎可以使用条形图进行此操作,但是我似乎无法使用切片来完成此操作。我尝试了以下内容:
var pieChart = new google.visualization.ChartWrapper({
options : {
...
slices: [{color: 'black'}, {color: 'green'}, {color: 'red'}]
}
});
颜色得到呈现,但我想为lease
指定black
。关于我如何使它工作的任何想法?
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>