4

使用 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>
4

1 回答 1

3

如果您直接使用范围中的数据，它似乎可以工作，所以它是从属性内解析 JSON 的东西。也许该函数试图以某种方式得到评估？用图表数据检查属性字符串后，可以看到 event: 函数包含空白对象。

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

于 2013-04-29T21:11:26.233 回答