在谷歌饼图中显示标签和百分比 [英] Show label and percentage in Google pie chart
问题描述
我想在 Google 饼图中显示标签和百分比.有什么办法吗?在 docs 中,我发现可以使用pieSliceText
选项.可能的值为:
I would like to show label and percentage in Google pie chart. Is there any way to do it? In the docs, I found that it is possible to modify text with pieSliceText
option. Possible values are:
label
- 显示数据名称(例如 Apples
)
label
- show name of data (e. g. Apples
)
value
- 显示绝对值(例如 7
)
value
- show absolute value (e. g. 7
)
percentage
- 显示百分比值(例如 50%
)
percentage
- show percentage value (e. g. 50%
)
value-and-percentage
- 显示值和百分比(例如 7 (50%)
)
value-and-percentage
- show both value and percentage (e. g. 7 (50%)
)
但是有没有像 label-and-percentage
这样的东西来显示类似 Apples (50%)
的东西?
But is there something like label-and-percentage
to show something like that Apples (50%)
?
推荐答案
唯一能同时显示标签和标签的配置选项百分比用于图例...
the only config option that will show both the label & percentage is for the legend...
legend: {
position: 'labeled'
},
请参阅以下工作片段...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Tasks', 'Completed'],
['Morning', 28],
['Afternoon', 43],
['Evening', 80],
['Night', 161]
]);
var options = {
width: 900,
height: 400,
title: 'Tasks Completed',
pieHole: 0.5,
colors: ['#008000', '#ffbf00', '#FF0000','#4E6282'],
pieSliceText: 'value',
sliceVisibilityThreshold :0,
fontSize: 17,
legend: {
position: 'labeled'
},
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
这篇关于在谷歌饼图中显示标签和百分比的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!