Highstock charts give "Uncaught TypeError: Cannot read property 'addPoint' of undefined" error

Question

我正在使用 highstock 图表库制作一组 4 张图表。我使用了 HERE 中描述的选项对象和文字符号。默认情况下，这 4 个图表具有相同的选项集（下面代码中的 renderCharts() 函数负责）并且有一个图表类型选择器（setChatType() 函数），用户可以借助它来更改图表类型。

一起查看全部HERE。

谁能告诉我控制台出现这个错误的原因和解决方法： "Uncaught TypeError: Cannot read property 'addPoint' of undefined"?

谢谢！

            /* ============ CHARTS OPTIONS BEGIN ============ */

              var options = {
              chart : {
                zoomType: 'x',
                events : {
                  load : function () {
                      // set up the updating of the chart each second
                      var series = this.series[0];
                      setInterval(function () {
                        var x = (new Date()).getTime();
                        var y = Math.round(Math.random() * 100);
                        series.addPoint([x, y]);
                      }, 1000);
                    }
                  }
                },
                rangeSelector: {
                  buttons: [{
                      count: 1,
                      type: 'minute',
                      text: '1M'
                  }, {
                      count: 5,
                      type: 'minute',
                      text: '5M'
                  }, {
                      type: 'all',
                      text: 'All'
                  }],
                  inputEnabled: false,
                  selected: 0
                },
                title : {
                    text: null
                },
                exporting: {
                    enabled: false
                },
                // Disable navigator
                navigator : {
                  enabled : false
                },
                series : [{
                  name : '',
                  data : (function () {
                      // generate an array of random data
                      var data = [],
                      time = (new Date()).getTime(), i;

                      for (i = -999; i <= 0; i = i + 1) {
                          data.push([
                              time + i * 1000,
                              Math.round(Math.random() * 100)
                          ]);
                      }
                      return data;
                  }())
              }]
            }

            /* ============ CHARTS OPTIONS END ============ */  

            /* ============ DRAW CHARTS BEGIN ============ */

            function renderCharts(){
              $('div.chart-container').each(function(){
                var chartId = $(this).attr('id');
                var chartIdParts = chartId.split('-');
                var chartIdentifier = chartIdParts[1];

                //Set chart options dinamically
                var chartId = "chart" + chartIdentifier;
                var chart = $('#' + chartId);
                var renderTo = "chartcontainer-" + chartIdentifier;

                //Render Charts for each aech container
                options.chart.renderTo = renderTo;
                options.chart.type = 'line';
                var chart = new Highcharts.StockChart(options);
              });
            }

            function setChatType(){
              // Show types list (piker)
              $('.current-type').on('click', function(){
                $(this).parents('div.chart-options').find('ul.type ul').addClass('clicked');
              });

              $('.chart-options ul ul li a').on('click', function(){

                //Get piked chart type
                var type = $(this).parent('li').attr('data-chart-type');

                // For text and Title Capitalization
                var textAndTitle = type.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

                // Show piked type in picker
                var currSetClass = 'current-type ' + type;
                $(this).parents('.chart-options').find('.current-type')
                    .text(textAndTitle)
                    .attr({
                      class : currSetClass,
                      title: textAndTitle
                    });

                // Then Hide the types list
                $('.chart-options ul ul').removeClass('clicked');

                //Identify current chart container by ID
                var chartCtnId= $(this).parents('div.chart').find('.chart-container').attr('id');

                // Render chart again with new type
                options.chart.renderTo = chartCtnId;
                options.chart.type = type;
                var chart = new Highcharts.StockChart(options);

              });
            }

            /* ============ DRAW CHARTS END ============ */

            $(document).ready(function(){  

              $("article.grid:even").addClass('left')
              $("article.grid:odd").addClass('right');

             // Draw charts
              renderCharts();

              // Set/change chart type
              setChatType();

            });

Answer 1

Pawel 建议的解决方案： 代替 var chart = new Highcharts.StockChart(options); 采用 var chart = new Highcharts.StockChart( $.extend(true, {}, options) );