Highcharts饼状图，如何在一个页面显示多个饼？

Question

如何在一个页面显示多个饼？类似图示：

图示的饼是如何遍历的讷？

Answer 1

var CountArray=[];
    $.getJSON("/api/xinxiguanli/jianquhuafen/counts", function (res) {
        for(var i=0;i<res.length;i++){
            var obj = res[i];
            var tmp="";
            var j=0;
            for (j;j<CountArray.length;j++){
                tmp=CountArray[j];
                //console.log(tmp);
                if (tmp.jianqu==obj.jianqu){
                    break;
                }
                tmp="";
            }
            if (tmp==""){
                CountArray.push({
                    "jianqu":obj.jianqu,
                    "data":[{
                        "name":obj.fenjianqu,
                        "y":obj.counts
                    }]
                })
            }else {
                CountArray[j]["data"].push({
                    "name":obj.fenjianqu,
                    "y":obj.counts
                });
            }
            //console.log(CountArray);
        }
        //console.log(CountArray);
        //console.log(JSON.stringify(CountArray));
        //console.log(CountArray.length);
        $.each(CountArray, function(i,item){
            //console.log(i);
                $("#pieChart").append("<li id=\'container"+i+"\' width='100%' heigth='100%'></li>");
                var chart1 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container'+i,
                        plotBackgroundColor: '#fff',
                        plotBorderWidth: 0,
                        plotShadow: false
                    },
                    title: {
                        verticalAlign:'bottom',
                        y:-60
                    },
                    tooltip: {
//            pointFormat: '{series.name}: <b>{point.percentage}人</b>',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+
                                Highcharts.numberFormat(this.y, 0, ',') +' 人';
                        }

                    },
                    plotOptions: {
                        pie: {
                            size:'30%',
                            borderWidth:0,
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
//                    format: '<b>{point.name}</b>: {point.percentage} 人',
//                       style: {
//                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
//                    },
                                formatter: function() {
                                    return '<b>'+ Highcharts.numberFormat(this.y, 0, ',') +'人 '
//                  Highcharts.numberFormat(this.y, 0, ',') +' 人';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: '分监区人数',
                        showInLegend:true
                    }]
                });
                chart1.series[0].setData(CountArray[i].data);
                chart1.setTitle({ text:CountArray[i].jianqu},null,false);
        });
    });

Answer 2

http://jsfiddle.net/Labsu6kk/

指定三个 series，然后每个 serie 设置 center 属性进行偏移。

Answer 3

一个饼怎么弄，多个饼依葫芦画瓢就怎么弄啊
只要饼图渲染的目标DOM元素不同就可以啦~~

Answer 4

每个饼图带一个标题怎么做