如何以编程方式在highcharts中打开多级精简版?

时间:2016-05-18 11:26:39

标签: highcharts

我的图表代码

   angular.module('myModule', []).service("CompOffLeaveService", function ($http) {
        this.getdata = function () {
            return $http({
                method: "post",
                url: "/Dashboard/GetCompOffLeaveReport",
                params: [{ YearID: $("#YearIn option:selected").text() }],
                dataType: "json"
            });
        };

    }).controller('myController', function (CompOffLeaveService) {
        GetAlldata();

        function GetAlldata() {

            var getCompOffLeaveData = CompOffLeaveService.getdata();
            getCompOffLeaveData.then(function (NoOfLeaves) {
                var myData = new Array();
                for (var j = 0; j < NoOfLeaves.data.TeamNames.length; j++) {
                    debugger;
                    if (NoOfLeaves.data.TeamNames[j] != null) {
                        myData[j] = [
                                     NoOfLeaves.data.TeamNames[j],
                                     NoOfLeaves.data.TeamWiseCompOffLeaves[j]
                        ];
                    }
                    else { break; }
                }
                var mySeries = [];
                for (var i = 0; i < myData.length; i++) {
                    mySeries.push({ name: myData[i][0], y: myData[i][1], drilldown: true });
                }
                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    credits: {
                        enabled: false
                    },

                    title: {
                        text: 'Comp Off Leave Report' + ' ' + $("#YearIn option:selected").text()
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: 'Total CompOffLeave Recorded'
                        }

                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}COL'
                            }
                        }
                    },

                    tooltip: {
                        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} COL</b> in total<br/>',
                    },
                    series: [{
                        name: 'Team',
                        colorByPoint: true,
                        data: mySeries
                    }],
                    drilldown: {
                        series: []
                    }
                });
            }, function () {
                alert('Error in getting records');
            });
        } $("#btnLoad").click(function (event) {
            GetAlldata();
        });
        $("#btnBack").click(function (event) {
            window.location.href = "home";
        });
        $(function () {
            $("#draggable").draggable({ axis: "y", containment: "#parent", scroll: false, revert: true });
            $("#resizable").resizable();
        });
    });

它工作得很好并且给了我这个输出

enter image description here

我想要的是打开任何列点击的钻取,这将点击一年中的所有月份,例如:

enter image description here

在进一步深入研究中,我想要这个。 enter image description here

我可以传递数据然后......但是钻取没有打开。

0 个答案:

没有答案