（五）、利用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';  //页面跳转

                   }

              }
        }]
    });
});

                <div style="width: 97%; height: 400; margin: 5px" id="tb2" runat="server">
                    <div id="container2" style="width: 95%; height: 400px; margin: 20,5,10,10;">
                    </div>
                </div>
                <div style="display: none;">
                    <input type="text" id="d_nf2" runat="server" />
                    <input type="text" id="d_p1" runat="server" />
                </div>
                <script language="javascript" type="text/javascript">
                    var chart;
                    $(document).ready(function () {
                        var xdata = eval($("#d_nf2").val());
                        var ydata1 = eval($("#d_p1").val());
                        chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'container2',
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false
                            },
                            title: {
                                text: '地表水资源量饼图'
                            },
                            credits: {
                                enabled: false
                            },
                            exporting: {
                                enabled: false
                            },
                            tooltip: {
                                formatter: function () {
                                    return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) + ' %';
                                }
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    showInLegend: true,
                                    dataLabels: {
                                        enabled: true,
                                        color: Highcharts.theme.textColor || '#000000',
                                        connectorColor: Highcharts.theme.textColor || '#000000',
                                        formatter: function () {
                                            return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) + ' %';
                                        }
                                    }
                                }
                            },
                            series: [{
                                type: 'pie',
                                name: '地表水资源量',
                                data: ydata1 //这个序列之，从后台数据库读取并动态拼凑该JSON序列串
                            }]
                        });
                    });
                </script>
            </radTS:PageView>
        </radTS:RadMultiPage>
    </div>

 简单的demo效果图如下：