Highcharts with angularjs drilled down does not work

问题

I am developing a drilled down chart using HichartJS, the chart is getting generated but drill down is not functioning properly.

I need the back button as well so that user can go back to the previous data.

Here is my code,

HTML:

 <div ng-controller="myctrl">
        <highchart id="chart1" config="highchartsNG"></highchart>
 </div>

JS:

var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'column'
            }
        },
        title: {
            text: 'Basic drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                }
            }
        },

        series: [{"data":[{"name":"Hiring","y":390309.25,"drilldown":"PRIME MOVER"},{"name":"Private","y":406746.97,"drilldown":"PRIME MOVER"}],"name":"series1","color":"","type":"area"}],
        drilldown: {
            series:  [{"id":"Hiring","data":[["MOTOR CAR",97610],["VAN",129750],["THREE WHEELER",62949.25],["PRIME MOVER",100000]]},{"id":"Private","data":[["MOTOR CAR",488356.97],["VAN",129750],["THREE WHEELER",78949.25],["PRIME MOVER",100000]]}]
        }
    }

});

Here is the Plunker

回答1:

Update2 I have made changes for your data , The problem was in formatting of json and the second problem was you were not calling proper id in drillDown. Check the fiddle updated Here with your data

Update1 I have made changes and now its working on fiddle Here . I have added changes to highcharts-ng in script tag in html section of fiddle. Also I changed the data, because your data was not formatted for me.

I just realize that drillDown feature isn't supported by highcharts-ng .see the link Highcharts-ng with drilldown Following edit was done at source code to make it work.

if(config.drilldown) {
  mergedOptions.drilldown = config.drilldown;
 };

来源：https://stackoverflow.com/questions/32650447/highcharts-with-angularjs-drilled-down-does-not-work

标签

json

angularjs

html5

Highcharts