（五）、利用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效果圖如下：