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

                              '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';  //页面跳转

                   }

              }

        }]

    });

});

 简单的demo效果图如下：