使用AngularJS指令,我可以加载Highcharts图.但是,我没有执行点击某个点的事件处理程序.
http://plnkr.co/edit/pxU0IsBTrvcEwr2Znf5d?p=preview
JS
var app = angular.module('charts',[]);
app.directive('highchart',function () {
return {
restrict: 'E',template: '<div></div>',replace: true,link: function (scope,element,attrs) {
scope.$watch(function() { return attrs.chart; },function() {
if(!attrs.chart) return;
var chart = JSON.parse(attrs.chart);
$(element[0]).highcharts(chart);
});
}
}
});
function Ctrl($scope) {
$scope.example_chart = {
xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},plotOptions: {
series: {
cursor: 'pointer',point: {
events: {
click: function() {
alert ('Category: '+ this.category +',value: '+ this.y);
}
}
}
}
},series: [{
data: [29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4]
}]
};
}
HTML
<section ng-app='charts'>
<div ng-controller="Ctrl">
<highchart chart='{{example_chart}}'></highchart>
</div>
</section>
