如何解决“TypeError：无法读取未定义的属性‘图表’”？

Question

我正在开发一个 Angular(1.5.8) 项目并使用安装的凉亭highcharts-nggithub link

添加highcharts-ng为：

angular.module('myapp',
      ['highcharts-ng',
        // more modules here..
      ])

在我的 html 文件中，我使用以下内容：

<div class="row">
    <highchart id="chart1" config="chartConfig"></highchart>
</div>

在我的控制器文件中： DashboardController.$inject = ['$scope', 'Principal', 'LoginService', '$state'];

function DashboardController ($scope, Principal, LoginService, $state) {
    $scope.chartConfig ={
       ....// configuration details
    };
}();

我把 <script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script> 转入index.html

不幸的是，我收到了这样的错误：

angular.js:13920 TypeError: Cannot read property 'Chart' of undefined
    at initChart (highcharts-ng.js:334)
    at linkWithHighcharts (highcharts-ng.js:349)
    at highchartsCb (highcharts-ng.js:463)
    at processQueue (angular.js:16383)
    at angular.js:16399
    at Scope.$eval (angular.js:17682)
    at Scope.$digest (angular.js:17495)
    at Scope.$apply (angular.js:17790)
    at done (angular.js:11831)
    at completeRequest (angular.js:12033)

谁能解释一下这个问题？

chartConfig 的详细信息，它是 https://github.com/pablojim/highcharts-ng 的副本，我用它来测试 highcharts 是否有效：

  function DashboardController ($scope) {
        //This is not a highcharts object. It just looks a little like one!
        $scope.chartConfig = {

            options: {
                //This is the Main Highcharts chart config. Any Highchart options are valid here.
                //will be overriden by values specified below.
                chart: {
                    type: 'bar'
                },
                tooltip: {
                    style: {
                        padding: 10,
                        fontWeight: 'bold'
                    }
                }
            },
            //The below properties are watched separately for changes.

            //Series object (optional) - a list of series using normal Highcharts series options.
            series: [{
                data: [10, 15, 12, 8, 7]
            }],
            //Title configuration (optional)
            title: {
                text: 'Hello'
            },
            //Boolean to control showing loading status on chart (optional)
            //Could be a string if you want to show specific loading text.
            loading: false,
            //Configuration for the xAxis (optional). Currently only one x axis can be dynamically controlled.
            //properties currentMin and currentMax provided 2-way binding to the chart's maximum and minimum
            xAxis: {
                currentMin: 0,
                currentMax: 20,
                title: {text: 'values'}
            },
            //Whether to use Highstocks instead of Highcharts (optional). Defaults to false.
            useHighStocks: false,
            //size (optional) if left out the chart will default to size of the div or something sensible.
            size: {
                width: 400,
                height: 300
            },
            //function (optional)
            // func: function (chart) {
            //     //setup some logic for the chart
            // }
        };
    }

Answer 1

包括，

<script src="http://code.highcharts.com/stock/highstock.src.js"></script> 

或

<script src="http://code.highcharts.com/highcharts.src.js"></script>

如git 页面中所述。

Answer 2

Mahesh 的回答是正确的，解决了我的问题。由于我使用的是Jhipster，手动导入脚本对我来说不是最佳选择。以下是在 JHipster 项目中导入的方法：

bower install highcharts --save

bower install highcharts --save

gulp inject:dev

它会自动将 JS 文件注入index.html。在我的情况下，highcharts.js 和 highcharts-ng.js 文件是在 angular.js 之前注入的，这会产生另一个错误Uncaught ReferenceError: angular is not defined，移动与 highcharts 相关的 js 时会解决angular.js 注入后注入。

例如：

    <script src="bower_components/angular/angular.js"></script>
    ...
    ...
    <script src="bower_components/highcharts/highcharts.js"></script>
    <script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>