开发者社区> 问答> 正文

Highcharts饼状图,如何在一个页面显示多个饼?

如何在一个页面显示多个饼?类似图示:
screenshot图示的饼是如何遍历的讷?

展开
收起
小旋风柴进 2016-05-30 10:00:56 3592 0
1 条回答
写回答
取消 提交回答
  •     $.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);
            });
    2019-07-17 19:19:07
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载