我想使用HighCharts渲染Stacked Bar Charts。
app.directive('testDirective', function() {
var directive = {};
directive.restrict = 'EA',
directive.controller = function($scope, $element, $attrs, $http) {
populateData($scope, $element, $attrs, $http);
},
directive.template = '<div id="container" style="margin: 0 auto ;min-width: 310px; max-width: 800px; height: 400px;">working</div>',
directive.link = function($scope, $element, $attrs) {
};
return directive;
});
function populateData(scope, element, attrs, http) {
var request = http.get("json/HighCharts.json");
scope.seriesData = {};
request.success(function(data, status) {
scope.seriesData = data;
plotChart(scope, element, attrs);
});
}
function plotChart(scope, element, attrs) {
var chart = new Highcharts.Chart({
chart : {
renderTo : scope.seriesData.id,
type : scope.seriesData.chart.type,
events : {
click : function(e) {
console.log('Chart clicked');
}
}
},
title : {
text : scope.seriesData.title.text
},
xAxis : {
categories : scope.seriesData.xAxis.categories
},
yAxis : {
min : 0,
title : {
text : scope.seriesData.yAxis.title.text
}
},
legend : {
reversed : true
},
plotOptions : {
series : {
stacking : scope.seriesData.plotOptions.series,
point : {
events : {
click : function() {
alert('Category: ' + this.category + ' ' + this.x + ' ' + this.y);
}
}
}
},
},
series : scope.seriesData.series
});
}
我面临的问题是我在控制器功能中操作DOM,这应该在链接功能中完成。
有人可以解释如何在链接功能中调用REST服务,然后在服务成功上绘制图表。
此外,如果有人可以请说明角度提供的好处(双向数据绑定)。