[英]Add custom text to value in google pie charts?
The following works and displays the pie charts with the value in it: 以下工作并显示其中包含值的饼图:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Internal studio', 3.5],
['External studio', 2.1],
]);
var options = {
legend: 'none',
fontSize: '16',
pieSliceText: 'value',
pieSliceBorderColor:"transparent",
backgroundColor: {
fill:'#090e1a',
strokeSize: 1
}
};
var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
chart.draw(data, options);
}
I would like to add M
next to the value eg. 我想在值旁边添加
M
3.5M
I tried: 我试过了:
['Internal studio', 3.5+"M"],
['External studio', 2.1+"M"]
But its' wrong. 但这是错误的。
in your data, you can provide both the value ( v:
) and the formatted value ( f:
), 在数据中,您可以同时提供值(
v:
和格式值( f:
,
by using object notation. 通过使用对象符号。
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Internal studio', {v: 3.5, f: '3.5M'}],
['External studio', {v: 2.1, f: '2.1M'}],
]);
see following working snippet... 请参阅以下工作片段...
google.charts.load('current', { packages: ['corechart'] }).then(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Internal studio', {v: 3.5, f: '3.5M'}], ['External studio', {v: 2.1, f: '2.1M'}], ]); var options = { legend: 'none', fontSize: '16', pieSliceText: 'value', pieSliceBorderColor:"transparent", backgroundColor: { fill:'#090e1a', strokeSize: 1 } }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="donut_single"></div>
another option, google has a number formatter you can use, 另一个选择,谷歌有一个数字格式器,您可以使用,
with a format option --> 'short'
带有格式选项->
'short'
this would allow you to provide the actual value, 这样您就可以提供实际价值,
but display the value 3,500,000
as 3.5M
但将值
3,500,000
显示为3.5M
and it will automatically use K
for thousand, etc... 它将自动使用
K
代表数千,依此类推...
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Internal studio', 3500000],
['External studio', 2100000],
]);
var formatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
formatShort.format(data, 1);
see following working snippet... 请参阅以下工作片段...
google.charts.load('current', { packages: ['corechart'] }).then(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Internal studio', 3500000], ['External studio', 2100000], ]); var formatShort = new google.visualization.NumberFormat({ pattern: 'short' }); formatShort.format(data, 1); var options = { legend: 'none', fontSize: '16', pieSliceText: 'value', pieSliceBorderColor:"transparent", backgroundColor: { fill:'#090e1a', strokeSize: 1 } }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="donut_single"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.