Question

我试图在我的用angularjs 1.3.15构建的PWA应用程序中包含高图我在bower.json中声明了highcharts

我的应用程序配置（包含要求配置）如下：

require.config({ paths: { "angular": "lib/angular/angular.min", "Q": "lib/q/q", .. "angular-my-highcharts": "lib/mydirectives/src/my.highcharts/my.highcharts" "highcharts": "lib/highcharts/highcharts" } shim: { 'angular': { exports: 'angular' }, 'highcharts': { exports: 'highcharts' } 'angular-my-highcharts': { deps: ['highcharts'] } });

我正在尝试为highcharts创建自定义指令。我使用的示例代码可以在此博客https://www.highcharts.com/blog/tutorials/194-using-highcharts-with-angular-js/中找到。

var highchartsModule = angular.module('my.highcharts', []);
highchartsModule.controller('HighchartsController', ['$scope',
function($scope) {
    $scope.chartOptions = {
        title: {
            text: 'Temperature data'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        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]
        }]
    };
}]);

highchartsModule.directive('hcChart', function () {
return {
    restrict: 'E',
    template: '<div></div>',
    scope: {
        options: '='
    },
    link: function (scope, element) {
        Highcharts.chart(element[0], scope.options);
    }
};
});

我在我的app.js中包含了my.highcharts模块

 app = angular.module('MYAPP', ["ngRoute","my.weekselector" ....... "my.highcharts"])

最后我将以下内容放入了HTML

 <div>
    <hc-chart options="chartOptions">Placeholder for generic chart</hc-chart>
 </div>

但是在运行应用程序时出现此错误

angular.min.js?_sw-precache=ca1a58818682c3e858a9beb:102 

ReferenceError: Highcharts is not defined
at link (http://localhost/js/lib/my-directives/src/my.highcharts/my.highcharts.js:28:13)

使用requirejs在angularjs中使用Highcharts时出错。自定义指令抛出错误

0 个答案: