首页 > 在angular中用懒加载的方式引入highcharts插件并使用,出现错误。

在angular中用懒加载的方式引入highcharts插件并使用,出现错误。

这是在router中懒加载hightcharts

 return $ocLazyLoad.load(['assert/js/jquery.js','assert/js/Highcharts/4.2.1/js/highcharts.js','assert/js/Highcharts/4.2.1/js/modules/exporting.js','assert/js/Highcharts/4.2.1/js/highcharts-3d.js','app/controllers/overview/overviewController.js']);

这是controller中获取数据并展示的方法

OverViewService.common.get(function(data){
    if(data.result==1){
    $scope.resource=data.resource;
    $scope.protectdatainfos=data.protectdatainfos;
    $scope.quota=data.quota;
    //图表开始
      $('#profile_charArea').highcharts({  //这是报错的地方
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari', 8.5],
                ['Opera', 6.2],
                ['Others', 0.7]
            ]
        }]
    });
    //图表结束
    }else{

    }
},function(error){})

1、请问为什么会出现这样的错误
2、应该怎样解决


两个可能:

  1. 你调用$('#profile_charArea').highcharts({,插件懒加载还没完

  2. highchart是依赖jquery的,但你的懒加载代码显然是把他俩平行加载了,这会出现一种可能性,highchart加载的时候,jquery还没下载完。如果是这个问题,强制先加载jquery,譬如直接放到headerscript里。


如果是想显示一些统计表格的话,给你一个推荐chart.js,简单又粗暴。而且angular的directive已经都写好了http://jtblin.github.io/angular-chart.js/。

【热门文章】
【热门文章】