如何处理AngularJS指令中的Highcharts事件？

发布时间：2020-12-17 17:12:40 所属栏目：安全来源：网络整理

导读：使用AngularJS指令,我可以加载Highcharts图.但是,我没有执行点击某个点的事件处理程序. http://plnkr.co/edit/pxU0IsBTrvcEwr2Znf5d?p=preview JS var app = angular.module('charts',[]);app.directive('highchart',function () { return { restrict: 'E',t

使用AngularJS指令,我可以加载Highcharts图.但是,我没有执行点击某个点的事件处理程序.

http://plnkr.co/edit/pxU0IsBTrvcEwr2Znf5d?p=preview

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>

解决方法

如果你直接使用作用域中的数据,它似乎是有效的,所以它是从属性中进行JSON解析的东西.也许该函数试图以某种方式得到评估？在使用图表数据检查属性字符串后,您可以看到事件：function包含空白对象.

plunker：http://plnkr.co/edit/QyccE0NDRfUCTuxTftUV?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!