Question

我正在开发一个Angular（1.5.8）项目并使用bower安装highcharts-ng github link

将highcharts-ng添加为：

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

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

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

在我的控制器文件中： DashboardController。$ inject = [＆＃39; $ scope＆＃39;，＆＃39; Principal＆＃39;，＆＃39; LoginService＆＃39;，＆＃39; $ state＆＃39;];

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的副本，我用它来测试高级图表是否有效：

  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

马赫什的回答是正确的，并解决了我的问题。由于我使用Jhipster，手动导入脚本不是我的最佳选择。以下是如何在JHipster项目中导入它：

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>

如何解决＆＃34; TypeError：无法读取属性＆＃39; Chart＆＃39;未定义＆＃34;？

2 个答案: