深入挖掘angularjs的Highcharts无法正常工作

萨耶塔兰(Sajeetharan)

我正在使用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

尼西斯·康德·查图尔维迪

Update2我已经对您的数据进行了更改,问题出在json的格式中,第二个问题是您没有在drillDown中调用正确的ID。检查小提琴在这里更新您的数据

Update1我进行了更改,现在可以在这里工作我在小提琴的html部分的脚本标签中对highcharts-ng进行了更改。我也更改了数据,因为您的数据没有为我格式化。

我只是意识到highcharts-ng不支持drillDown功能。请参阅带有rilldown的Highcharts-ng链接。在源代码上进行了以下编辑以使其工作。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章