如何使用jquery Highcharts在饼图中显示值而不是百分比
Posted
技术标签:
【中文标题】如何使用jquery Highcharts在饼图中显示值而不是百分比【英文标题】:How to display the value instead of percentage in a pie chart using jquery Highcharts 【发布时间】:2011-12-18 15:48:36 【问题描述】:对于我的一个项目,我使用 jQuery Highcharts 制作的饼图。要做的是显示我插入的值而不是父母。示例:图表显示 Firefox - 43.269...% 而我喜欢显示值 Firefox -45 点击。谁能帮我这个。提前致谢。
图表代码
<!-- 1. Add these javascript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="../js/themes/gray.js"></script>
-->
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="../js/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
$(document).ready(function()
chart = new Highcharts.Chart(
chart:
renderTo: 'browser_cart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
,
title:
text: 'Browser market shares at a specific website, 2010'
,
tooltip:
formatter: function()
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
,
plotOptions:
pie:
allowPointSelect: true,
cursor: 'pointer',
dataLabels:
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function()
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' clicks';
,
series: [
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45],
['IE', 26],
['Chrome', 12],
['Safari', 8],
['Opera', 6],
['Others', 7]
]
]
);
);
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="browser_cart" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
【问题讨论】:
工具提示选项 > - Highcharts Options Reference for Tooltip 示例: > - highcharts demo 来源: > - highslide.com/forum 【参考方案1】:已修复,只是在下面一行更改
format: '<b>point.name</b>: point.percentage:.1f %',
到
format: '<b>point.name</b>: point.y:.1f Rs.',
【讨论】:
如果我想对数字使用 int 类型?我的意思是,这是可行的,但是使用 250.0、77.0 等。我想要 77、250。有帮助吗? 你可以试试这个format: '<b>point.name</b>: point.y:.0f Rs.'
,而不是。
这对我有用 pointFormat: 'series.name: point.y:,.0f'【参考方案2】:
return '<b>'+ this.point.name +'</b>: '+ this.y +' clicks';
【讨论】:
【参考方案3】:在这种情况下,您可以将“this.percentage”替换为“this.point.y”
查看格式化程序:(旧链接已删除),新链接 - https://api.highcharts.com/highcharts/tooltip.formatter
【讨论】:
再次检查,我可能错误地投了反对票。该链接正在运行。我为此道歉。再次投票。以上是关于如何使用jquery Highcharts在饼图中显示值而不是百分比的主要内容,如果未能解决你的问题,请参考以下文章