highcharts在angularjs中 点击事件不起作用

需求:点击某个柱状图,显示该列数据的详情,查阅了文档,代码如下,但是click事件没有触发,请问是怎么回事?
highcharts directive:

angular.module('myapp')
  .directive('chart',function(){
    return{
      restrict:'AE',
      replace:true,
      scope:{
        option:'@'
      },
      link:function(scope,element,attr){
        function init(){
          var option=JSON.parse(scope.option);
          //这里打印的option中events是空的,问题出在这,不知道什么原因
          option.chart = option.chart || {};
          option.chart.renderTo = option.chart.renderTo || element[0];
          var chartObj = new Highcharts.Chart(option);
        }
        init();
        attr.$observe("option",function(){
          init();
        })
      }
    }
})
$scope.option = {
            chart:{
                type: 'column'
            },
            title: {
                text: '',
                x: -20,
            },
            subtitle: {
                text: '统计',
                x: -20,
                style: {
                    fontFamily: '微软雅黑'
                }
            },
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
                borderWidth: 0
            },
            tooltip: {
                valueSuffix: '',
                style: {
                    fontFamily: '微软雅黑'
                }
            },
            xAxis: {
                categories: [],
                gridLineWidth: 0,
                labels: {
                    style: {
                        fontFamily: '微软雅黑',
                        color: '#666',
                        fontSize: '12px'
                    }
                }
            },
            yAxis: {
                title: {
                    text: '次数'
                },
                //tickInterval: 2
                allowDecimals: false
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                alert('Category: ' + this.category + ', value: ' + this.y);
                            }
                        }
                    }
                }
            },
            series: [
                {
                    type: 'column',
                    data: []
                }
            ],
            credits: {
                enabled: false
            },
            lang: {
                noData: "暂无数据",
            },
            noData: {
                style: {
                    fontWeight: 'bold',
                    fontSize: '25px',
                    color: '#303030'
                }
            }
        }
        $scope.search = function(){
            $http.get(url).success(function(res){
                $scope.option.xAxis.categories = getXarray(res);
                $scope.option.series[0].data = getData(res);
            })
        }
        function getData(data){
            var temp = [];
            angular.forEach(data, function (item) {
                temp.push(item.count)
            })
            return temp;
        }
        function getXarray(data) {
            var temp = [];
            angular.forEach(data,function(item){
                temp.push(item.name)
            })
            return temp;
        }
阅读 1.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进