我正在使用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] 删除。
我来说两句