与angularjs Highcharts向下钻取不起作用 [英] Highcharts with angularjs drilled down does not work

问题描述

我使用HichartJS开发一个向下钻取的图表，是如何产生图表，但向下钻取不正常。

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

我需要后退按钮，以及使用户可以返回到previous数据。

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

下面是我的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]]}]
        }
    }

});

下面是 Plunker

推荐答案

UPDATE2 我已经修改为您的数据，问题是在JSON的格式和第二个问题是你是不是要求正确ID的细目。与您的数据检查小提琴更新这里

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 我所做的更改，现在对小提琴在这里工作。我已经添加在小提琴的HTML部分脚本代码会发生变化highcharts-NG。此外，我改变了数据，因为您的数据格式不适合我。

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.

我刚刚意识到，向下钻取功能不是highcharts-NG支持。看到链接 Highcharts-NG与钻取
以下编辑在源$ C ​​$ C完成，使其工作。

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

这篇关于与angularjs Highcharts向下钻取不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！