我正在寻找一种方法来对谷歌饼图中的最后一个切片进行一致的着色。最后一个切片的标题是“其他”，我并不总是知道显示了多少个其他切片。我设置了以下垃圾箱...
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Other', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Other', 2]
]);
var options = {
title: 'My Daily Activities 2'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>
我考虑将“其他”作为第一个返回的项目，这将允许我定位第一个项目的颜色，但随后我需要某种方法将饼图旋转回来。据我所知，您只能按百分比而不是切片数量来做到这一点。
最佳答案
如果您想更改切片的颜色，您可以在此图表上选择。
链接
https://developers.google.com/chart/interactive/docs/gallery/piechart
示例
slices: [{color: 'black', {}, {}, {color: 'red'}] // order of the slice
slices: {0: {color: 'black'}, 3: {color: 'red'}} // number of the slice
您的代码已修改
我冒昧地更改了第一个图表上的所有颜色，只更改了最后一个切片。
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Other', 7]
]);
var options = {
title: 'My Daily Activities',
slices: {
0: { color: 'blue' },
1: { color: 'red' },
2: { color: 'orange' },
3: { color: 'grey' },
4: { color: 'black' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Other', 2]
]);
var options = {
title: 'My Daily Activities 2',
slices: {
3: { color: 'black' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>
关于javascript - 谷歌饼图中的最后一个切片颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28684266/