我想谷歌饼图显示pieSliceText被舍入整数
问题描述:
我正在使用谷歌饼图,我想要显示百分比值,但它不是那样显示。任何人,建议我一个想法来显示四舍五入的百分比值。我的代码看起来像我想谷歌饼图显示pieSliceText被舍入整数
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Members', 'Total Members'],
['Members', 23],
['Total Members', 41 - 23]
]);
var options = {
width: 150,
height: 150,
chartArea: {
width: 150,
height: 150,
left: 10},
legend: {position: 'none'},
tooltip: {trigger: 'none'},
colors: ['#FEC240', '#FFFFFF'],
pieSliceText: 'percentage',
pieSliceTextStyle: {
bold: true,
fontSize: 16,
color: 'black'
},
enableInteractivity: false,
pieSliceBorderColor: "#DFE0E1"
};
var chart = new
google.visualization.PieChart(document.getElementById('checkpie'));
chart.draw(data, options);
<div id="checkpie" ></div>
答
没有设置相应的片
这样显示的百分比的格式标准的选择,需要计算的百分比手动,
使用选项 - >pieSliceText: 'value'
- 上显示格式化切片价值
见下工作片断......
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Members', 'Total Members'],
['Members', 23],
['Total Members', 41 - 23]
]);
// find total to calc % manually
var totalData = google.visualization.data.group(
data,
[{column: 0, modifier: function() {return 'total'}, type:'string'}],
[{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
);
// number formatter
var formatPercent = new google.visualization.NumberFormat({
pattern: '0%'
});
// set formatted value for each row
for (var i = 0; i < data.getNumberOfRows(); i++) {
var calcPercent = data.getValue(i, 1)/totalData.getValue(0, 1);
data.setFormattedValue(i, 1, formatPercent.formatValue(calcPercent));
}
var options = {
width: 150,
height: 150,
chartArea: {
width: 150,
height: 150,
left: 10
},
legend: {position: 'none'},
tooltip: {trigger: 'none'},
colors: ['#FEC240', '#FFFFFF'],
pieSliceText: 'value', // <-- show formatted value on slices
pieSliceTextStyle: {
bold: true,
fontSize: 16,
color: 'black'
},
enableInteractivity: false,
pieSliceBorderColor: "#DFE0E1"
};
var chart = new google.visualization.PieChart(document.getElementById('checkpie'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="checkpie"></div>