饼图下钻

$(function () {

    var chart;

    $(document).ready(function () {

        //定义一系列的参数以及初始化

        var colors = Highcharts.getOptions().colors,

            categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],

            name = '主流浏览器',

            data = [{

                name: 'MSIE',

                y: 55.11,

                color: colors[0]

            }, {

                name: 'Firefox',

                y: 21.63,

                color: colors[1],

                drilldown: {

                    name: 'Firefox versions',

                    data: [

                            {

                                y:0.20,

                                name:'Firefox 2.0'

                            }, 

                            {

                                y:0.83,

                                name:"Firefox 3.0"

                            }, 

                            {

                                y:1.58,

                                name:"Firefox 3.5"

                            },

                           {

                              y:13.12,

                              name:"Firefox 3.6"

                            }, 

                            {

                                y:5.43,

                                name:"Firefox 4.0"

                            }]                    

                }

            }, {

                name: 'Chrome',

                y: 11.94,

                color: colors[2]

            }, {

                name: 'Safari',

                y: 7.15,

                color: colors[3]

            }, {

                name: 'Opera',

                y: 2.14,

                color: colors[4]                

            }];

 

        //根据相关图表参数重绘highcharts图表

        function setChart(name, data, color) {

            //移除之前序列 如果有多个可以用for逐个移除

            chart.series[0].remove(false);

            //添加新的序列

            chart.addSeries({

                name: name,

                data: data

            }, false);

            //重绘图表

            chart.redraw();

        }

 

        //初始化图表

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'pie'

            },

            title: {

                text: '2012年五月份各大主流浏览器的市场份额对比图'

            },

            subtitle: {

                text: '点击每一根柱子查看详情 再次点击返回上层'

            },

            xAxis: {

                categories: categories

            },

            yAxis: {

                title: {

                    text: '市场总份额'

                }

            },

            credits: {

                text: 'highcharts的博客',

                href: 'http://www.stepday.com/myblog/?highcharts',

                position: {

                    align: 'right', //水平居右

                    verticalAlign: 'bottom' //垂直底部

                },

                style: {

                    cursor: 'pointer', //鼠标样式为手型

                    color: '#FF0000', //字体颜色

                    fontSize: '10px' //字体大小

                }

            },

            plotOptions: {

                pie: {

                    cursor: 'pointer',

                    point: {

                        events: {

                            click: function () {

                                //根据是否进入钻取的状态重绘不同的图表

                                var drilldown = this.drilldown;

                                if (drilldown) { // drill down

                                    setChart(drilldown.name, drilldown.data, drilldown.color);

                                } else { // restore                                    

                                    setChart(name, data);

                                }

                            }

                        }

                    },

                    dataLabels: {

                        enabled: true,

                        color: colors[0],

                        style: {

                            fontWeight: 'bold'

                        },

                        formatter: function () {

                            return this.key + this.y + '%';

                        },

                        showInLegend: true //是否显示图例

                    }

                }

            },

            tooltip: {

                formatter: function () {

                    var point = this.point,

                        s = point.name + ':<b>' + this.y + '% 市场份额</b><br/>';

                    if (point.drilldown) {

                        s += '点击查看 ' + point.name + ' 详情';

                    } else {

                        s += '点击返回上层';

                    }

                    return s;

                }

            },

            series: [{

                name: name,

                data: data,

                color: 'white'

            }],

            exporting: {

                enabled: false

            }

        });

    });

 

});