Question

我的饼图将进入深入分析，但只显示几条连接线。当我返回到原始图表时，只显示一个切片，并且连接器和标签混乱。因为我的数据是从防火墙后面拉出来的，所以我无法摆弄小提琴。我的代码和图表的图片如下。使用淡入方法可以解决钻取视图，但不能解决钻取过程。

$(document).ready(function() {
  $().SPServices({
        operation: "GetListItems",
        CAMLQuery: "<Query><OrderBy><FieldRef Name='Business_x0020_Unit'/><FieldRef Name='Session_x0020_Status'/></OrderBy></Query>",
        CAMLViewFields: "<ViewFields><FieldRef Name='Business_x0020_Unit'/></ViewFields>",
        listName: "{C6673173-9AC5-4A6B-9401-15D0F38EFCB8}",
        completefunc: function(xData, status) {

                 var spc1Data = [];
                 var dev = [];
                 var ops = [];

                //console.log(xData.responseXML);
                $(xData.responseXML).SPFilterNode("z:row").each(function() {
                    var bu = $(this).attr('ows_Business_x0020_Unit');


                    //YTD Requests by ATO data
                    if (bu === "Global Connections Management"){ 
                        spc1Data.push({
                            BU: "GCM"
                        });
                    }else if(bu === "Technology Design & Architecture"){
                         spc1Data.push({
                            BU: "TD&A"
                        });
                    }else if(bu === "Global Customer Service"){
                         spc1Data.push({
                            BU: "GCS"
                        });
                    }else{
                         spc1Data.push({
                            BU: bu
                        });

                        if (String(bu).indexOf('Dev') > -1) {


                            dev.push({
                            BU: bu.slice(11)

                            //Org: ""
                            });
                        }
                        else if (String(bu).indexOf('Ops') > -1){
                            ops.push({
                            BU: bu.slice(11)

                            //Org: ""
                            });
                        }
                   }
               });

                    var spcData = [];
                    for (var i = 0; i < spc1Data.length; i++) {
                    if (String(spc1Data[i].BU).indexOf('-') > -1) {
                        var bu = String(spc1Data[i].BU);
                        spc1Data[i].BU = bu.slice(0, 8);
                        spcData[i] = spc1Data[i];
                    } else {
                        spcData[i] = spc1Data[i];
                    }
                }

                drilldownSeries = [];
                 var devTemp = _.groupBy(dev, 'BU');
                 _.each(devTemp, function(row) {
                    var buCount = row.length;
                        drilldownSeries.push({
                        id: "tech dev",
                        name: row[0].BU,
                        data: [row[0].BU, buCount]
                       });
                    });

                   var chartDataDrillOps = [];
                    var devOps = _.groupBy(ops, 'BU');
                     _.each(devOps, function(row) {
                        var buCount = row.length;
                        drilldownSeries.push({
                        id: "tech ops",
                        name: row[0].BU,
                        data: [row[0].BU, buCount]

                        });
                    });


                var chartData = [];
                var buData = _.groupBy(spcData, 'BU');
                _.each(buData, function(row) {
                    var buCount = row.length;
                    if (row[0].BU === "Tech Dev"){
                        chartData.push({
                            name: row[0].BU,
                            y: buCount,
                            drilldown: row[0].BU.toLowerCase()
                            //drilldown: chartDataDrillDev
                       // drilldown: row[0].BU
                        });
                    }else if(row[0].BU === "Tech Ops"){
                        chartData.push({
                            name: row[0].BU,
                            y: buCount,
                           drilldown: row[0].BU.toLowerCase()
                            //drilldown: chartDataDrillOps
                       // drilldown: row[0].BU
                        });
                    }else{
                        chartData.push({
                            name: row[0].BU,
                            y: buCount
                        });
                    }
                });


               // CREATE A FADE-IN METHOD FOR 3D-ARCS
               Highcharts.wrap(Highcharts.SVGRenderer.prototype, 'arc3d', function (proceed) {
                    var result = proceed.apply(this, [].slice.call(arguments, 1));
                    result.fadeIn = result.show;
                    return result;
                });

                var chart = new Highcharts.Chart({
                    chart: {
                        type: 'pie',
                        plotBorderColor: '#0574AC',
                        borderWidth: .5,
                        options3d: {
                            enabled: true,
                            alpha: 55,
                            beta: 0
                        },
                        renderTo: 'buRequests',
                        plotShadow: false
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: 'YTD Requests by ATO'
                    },
                    tooltip: {
                        pointFormat: '{point.y}' + ' Requests' + '<br>' + '{point.percentage:1.0f}%'
                            //percentageDecimals: 1
                    },
                    plotOptions: {
                        pie: {
                            size: '80%',
                            allowPointSelect: true,
                            cursor: 'pointer',
                            depth: 35,
                            dataLabels: {
                                softConnector: true,
                                useHTML: true,
                                enabled: true,
                                padding: 0,
                                fontWeight: 'medium',
                                //format: '{point.name}'+ '<br>' + '{point.y}' +' Requests' + '<br>' + '{point.percentage:1.0f}%',
                                formatter: function() {
                                    var req;
                                    if (this.point.y === 1) {
                                        req = " Request";
                                    } else {
                                        req = " Requests";
                                    }
                                    return '<span style="color:' + this.point.color + '">' + this.point.name + '<br>' + this.point.y + req + '<br>' + Math.round(this.percentage) + '%' + '</span>';
                                }
                            },
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'BU Count',
                        data: chartData,
                        colors: ['#0472A9', '#F9B112', '#42C5F1', '#EB6E00', '#4AA70A', '#C1D52C']
                    }],
                   drilldown:{
                    series: drilldownSeries                       
                   }
               });console.log(chart);
              }
           });
        });

Highchart饼图向下钻取不工作

0 个答案: