javascript - 类型错误 : Highcharts[h] is not a function

Question

我的 Plnkr 链接:http://plnkr.co/edit/S0BKjrgxz564oCPs9nCw?p=preview

知道为什么我会收到此错误吗？不确定 Highcharts[h] 在哪里...

Controller 代码

(function() {
    angular.module('highChartTest', ['ui.bootstrap', 'highcharts-ng'])
        .controller('MyHighChart', ['$scope', '$timeout', MyHighChart]);

    // HighCharts Column Chart
    function MyHighChart($scope, $timeout) {

        var vs             = $scope;
            ticker         = 'GOOG',
            vs.chartObject = {};
        
        var dayHolder = [];
        var count = 0;
        _.times(97, function() {
            dayHolder.push({
                'x': count++,
                'y': count++
            });
        });

        // Default data fed into navigator:
        vs.navigatorData = dayHolder;

        this.config = {
            options: {
                    ignoreHiddenSeries: false,
                    credits: { enabled: true, text: 'www.tickertags.com' },
                    legend: {
                        itemStyle: {
                            color      : "#333333",
                            cursor     : "pointer",
                            fontSize   : "10px",
                            fontWeight : "normal"
                        },
                        enabled  : true,
                        floating : true,
                        align    : 'left',
                        verticalAlign: 'top',
                        x: 60
                    },
                    chart : {
                        title    : { text: '' },
                        subtitle : { text: '' },
                        renderTo : 'chart1',
                        zoomType : 'x',
                        events: {
                            load: function () {
                                // HighChart loaded callback:
                                broadcastChartLoaded();
                                console.log('config.chart.events.load...');
                            },
                            redraw: function(event) {
                                // console.log(' chart events redraw fired');
                            }
                        }
                    },
                    scrollbar: {
                        enabled    : false,
                        liveRedraw : false
                    },
                    navigator : {
                        enabled: true,
                        adaptToUpdatedData: true,
                        // enabled: false,
                        // adaptToUpdatedData: false,
                        series : {
                            data : vs.navigatorData
                        }
                    },
                    rangeSelector: {
                        enabled: false,
                    },
                    exporting: { enabled: false }
                },
                exporting: { enabled: false },
                useHighStocks: true,
                xAxis : {
                    ordinal: false,
                    dateTimeLabelFormats : {
                        hour   : '%I %p',
                        minute : '%I:%M %p'
                    },
                    events : {
                        // afterSetExtremes : afterSetExtremes,
                        // setExtremes : setExtremes
                    },
                    minRange: 3600 * 1000 // one hour
                },
                yAxis: [{ // Primary yAxis
                    labels: {
                        format: '${value:.2f}',
                        style: {
                            color: '#4C73FF',
                        }
                    },
                    title: {
                        text: 'Price',
                        style: {
                            color: '#4C73FF',
                        }
                    }
                },
                { // Secondary yAxis
                    gridLineWidth: 0,
                    title: {
                        text: 'Mentions',
                        style: {
                            color: '#FDE18D'
                            // Pick one - "#FDE18D", "#7DD0FA", "#58A6EC"
                        }
                    },
                    opposite: false
                }],
                func: function(chart) {
                    vs.chartObject = chart;
                },

                series : [{
                    zIndex: 1000,
                    yAxis: 0,
                    showInLegend: true,
                    color: '#4C73FF',
                    data: dayHolder,
                    type: 'line',
                    name: 'SPY',
                    dataGrouping: {
                        enabled: true
                    }
                }]
        };
        
        function broadcastChartLoaded() {
          console.log('broadcastChartLoaded!!!');
        }
        
        $timeout(function() {
          console.log('inside timeout, now add 1st series');
          var quoteData = vs.navigatorData;
          vs.chartObject.addSeries({
              zIndex       : 1000,
              yAxis        : 0,
              name         : ticker,
              data         : quoteData,
              type         : 'line',
              color        : '#4C73FF',
              showInLegend : true,
              dataGrouping : {
                  enabled: true
              }
            }, true);
        }, 2000);
    }
})();

Answer 1

您使用的是 highcharts，而不是 highstock.js 库，但在配置中指定了 highstock。

http://plnkr.co/edit/mr4STsk3ekVOwXpZVgk0?p=preview

<script data-require="highstock@4.2.3" data-semver="4.2.3" src="//cdnjs.cloudflare.com/ajax/libs/highstock/4.2.3/highstock.js"></script>