利用HighCharts 显示饼图

利用HightCharts显示饼图，主要有以下几个主要注意点：

1、百分比格式，精确到小数点几位：

Highcharts.numberFormat(this.percentage, 2) //2表示精确到小数点后2位

2、series的data格式 [名称,值]的JSON格式序列

[

[IE浏览器,200],

[Firefox浏览器,300],

[傲游,40],

[Safari,50]

]

3、点击饼图事件，弹出提示及页面跳转

$(function () {

var chart = new Highcharts.Chart({

chart: {

renderTo: ‘container‘

},

xAxis: {

categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]

},

plotOptions: {

series: {

cursor: ‘pointer‘,

events: {

click: function(event) {

alert(this.name +‘
clicked\n‘+

‘Alt: ‘+ event.altKey +‘\n‘+

‘Control: ‘+ event.ctrlKey +‘\n‘+

‘Shift: ‘+ event.shiftKey +‘\n‘);

location.href=‘http://www.baidu.com‘;  //页面跳转

}

}

}

},

series: [{

data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],

events: {

click: function (e) {

alert(e.point.name); //弹出提示

location.href=‘http://www.baidu.com‘;  //页面跳转

}

}

}]

});

});

[csharp] view
plaincopy

1. <div style="width: 97%; height: 400; margin: 5px" id="tb2" runat="server">
2. <div id="container2" style="width: 95%; height: 400px; margin: 20,5,10,10;">
3. </div>
4. </div>
5. <div style="display: none;">
6. <input type="text" id="d_nf2" runat="server" />
7. <input type="text" id="d_p1" runat="server" />
8. </div>
9. <script language="javascript" type="text/javascript">
10. var chart;
11. $(document).ready(function () {
12. var xdata = eval($("#d_nf2").val());
13. var ydata1 = eval($("#d_p1").val());
14. chart = new Highcharts.Chart({
15. chart: {
16. renderTo: ‘container2‘,
17. plotBackgroundColor: null,
18. plotBorderWidth: null,
19. plotShadow: false
20. },
21. title: {
22. text: ‘地表水资源量饼图‘
23. },
24. credits: {
25. enabled: false
26. },
27. exporting: {
28. enabled: false
29. },
30. tooltip: {
31. formatter: function () {
32. return ‘<b>‘ + this.point.name + ‘</b>: ‘ + Highcharts.numberFormat(this.percentage, 2) + ‘ %‘;
33. }
34. },
35. plotOptions: {
36. pie: {
37. allowPointSelect: true,
38. cursor: ‘pointer‘,
39. showInLegend: true,
40. dataLabels: {
41. enabled: true,
42. color: Highcharts.theme.textColor || ‘#000000‘,
43. connectorColor: Highcharts.theme.textColor || ‘#000000‘,
44. formatter: function () {
45. return ‘<b>‘ + this.point.name + ‘</b>: ‘ + Highcharts.numberFormat(this.percentage, 2) + ‘ %‘;
46. }
47. }
48. }
49. },
50. series: [{
51. type: ‘pie‘,
52. name: ‘地表水资源量‘,
53. data: ydata1 //这个序列之，从后台数据库读取并动态拼凑该JSON序列串
54. }]
55. });
56. });
57. </script>
58. </radTS:PageView>
59. </radTS:RadMultiPage>
60. /div>

简单的demo效果图如下：