向下钻取angularjs的Highcharts不起作用

Question

我正在使用 HichartJS 开发一个向下钻取的图表，该图表正在生成但向下钻取功能不正常。

我还需要返回按钮，以便用户可以返回到以前的数据。

这是我的代码，

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]]}]
        }
    }

});

这里是Plunker

Answer 1

Update2 我已经对您的数据进行了更改，问题在于 json 的格式，第二个问题是您没有在 DrillDown 中调用正确的 id。检查小提琴更新Here with your data

Update1 我已经进行了更改，现在它正在使用小提琴 Here 。我在小提琴的 html 部分的脚本标记中添加了对 highcharts-ng 的更改。我还更改了数据，因为您的数据没有为我格式化。

我刚刚意识到 highcharts-ng 不支持drillDown 功能。请参阅链接Highcharts-ng with drilldown 对源代码进行了以下编辑以使其正常工作。

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