（五）、利用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 plain copy

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效果图如下：