i found that if you reverse the order of the rows,
you can get the 3d effect to display properly.
随着切片的颠倒，我已经手动提供了与默认 colored颜色 匹配的 colored颜色 .
唯一的另一个区别是图例条目的顺序.
请参见下面的工作片段...
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Eat', 25],
['Work', 75],
]);
var options = {
colors: ['dc3912', '3366cc'],
title: 'My Daily Activities',
is3D: true,
slices: {
1: {offset: 0.2},
},
pieStartAngle: 12
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
EDIT个
as for adding a background color to the chart area,
I wasn't able to get config option chartArea.backgroundColor to work.
就我所知，对于饼图，整个图表就是图表区域，不同于其他图表.
我能想到的唯一其他 Select 是在图表的Ready事件上添加自定义图表元素.
finding the exact placement of the background element will be tricky.
I wasn't able to come up with anything quickly, I've left some hints on how that might be accomplished.
in the following example, the background element's placement is hard-coded, using a <circle> element.
but you could use any other element, such as <rect>, or <path>...
google.charts.load('current', {
packages: ['corechart']
}).then(function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Eat', 25],
['Work', 75],
]);
var options = {
colors: ['dc3912', '3366cc'],
title: 'My Daily Activities',
is3D: true,
slices: {
1: {offset: 0.2},
},
pieStartAngle: 12
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
// add element to chart to use as background color
function addBG() {
var bg;
var chartElements;
var svg;
var svgNS;
// initialize chart elements
svg = null;
svgNS = null;
chartElements = chart.getContainer().getElementsByTagName('svg');
if (chartElements.length > 0) {
svg = chartElements[0];
svgNS = svg.namespaceURI;
}
chartElements = chart.getContainer().getElementsByTagName('path');
/*
// calculate placement
var x = null;
var y = null;
var height = null;
var width = null;
Array.prototype.forEach.call(chartElements, function(element, index) {
var bounds = element.getBBox();
x = x ?? bounds.x;
x = Math.min(bounds.x, x);
y = y ?? bounds.y;
y = Math.min(bounds.y, y);
height = height ?? bounds.height;
height = Math.max(bounds.height, height);
width = width ?? bounds.width;
width = Math.max(bounds.width, width);
});
console.log('x', x);
console.log('y', y);
console.log('height', height);
console.log('width', width);
*/
// add background
// <circle fill="rgba(255, 0, 255, 0.5)" cx="328" cy="260" r="180"></circle>
bg = document.createElementNS(svgNS, 'circle');
bg.setAttribute('fill', 'rgba(255, 0, 255, 0.5)');
bg.setAttribute('cx', 328);
bg.setAttribute('cy', 260);
bg.setAttribute('r', 180);
svg.insertBefore(bg, chartElements[0].parentNode);
}
google.visualization.events.addListener(chart, 'ready', function () {
// add background element
addBG();
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
