for a project of mine im using a pie char that made with jQuery Highcharts. what like to do is to display the value i inserted instead of the the parentage. example: chart shows firefox - 43.269...% instead i like to show the value Firefox -45 clicks. can anyone help me with this. thanks in advance.
对于我的项目我使用的是使用jQuery Highcharts制作的饼图。我想做的是显示我插入的值而不是父母。示例:图表显示firefox - 43.269 ...%而不是我想显示Firefox -45点击的值。谁能帮我这个。提前致谢。
Chart code
图表代码
<!-- 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>
5 个解决方案
#1
13
Tooltip options
工具提示选项
- Highcharts Options Reference for Tooltip
- 工具提示的Highcharts选项参考
Example:
例:
- highcharts demo
- highcharts演示
Source:
资源:
- highslide.com/forum
- highslide.com/forum
#2
39
Fixed, Just Changed below line
固定,刚改为以下线
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
to
至
format: '<b>{point.name}</b>: {point.y:.1f} Rs.',
#3
24
return '<b>'+ this.point.name +'</b>: '+ this.y +' clicks';
#4
11
In this case you can replace "this.percentage" to "this.point.y"
在这种情况下,您可以将“this.percentage”替换为“this.point.y”
Look at formatter: (old link removed), new link - https://api.highcharts.com/highcharts/tooltip.formatter
看格式化程序:(删除旧链接),新链接 - https://api.highcharts.com/highcharts/tooltip.formatter
#1
13
Tooltip options
工具提示选项
- Highcharts Options Reference for Tooltip
- 工具提示的Highcharts选项参考
Example:
例:
- highcharts demo
- highcharts演示
Source:
资源:
- highslide.com/forum
- highslide.com/forum
#2
39
Fixed, Just Changed below line
固定,刚改为以下线
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
to
至
format: '<b>{point.name}</b>: {point.y:.1f} Rs.',
#3
24
return '<b>'+ this.point.name +'</b>: '+ this.y +' clicks';
#4
11
In this case you can replace "this.percentage" to "this.point.y"
在这种情况下,您可以将“this.percentage”替换为“this.point.y”
Look at formatter: (old link removed), new link - https://api.highcharts.com/highcharts/tooltip.formatter
看格式化程序:(删除旧链接),新链接 - https://api.highcharts.com/highcharts/tooltip.formatter