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

发布于 2022-09-11 19:20:59 字数 3434 浏览 15 评论 0

需求:点击某个柱状图,显示该列数据的详情,查阅了文档,代码如下,但是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;
        }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文