Question

我使用highstock图表库来获取一组4个图表。我使用了HERE所述的options对象和文字表示法。默认情况下，4个图表具有相同的选项集（下面的代码中的renderCharts（）函数负责）并且有一个图表类型选择器（setChatType（）函数），用户可以帮助改变图表类型。

查看所有togheter HERE。

任何人都可以告诉我控制台中此错误的原因和解决方法： “未捕获的TypeError：无法读取未定义的属性'addPoint'”？

谢谢！

            /* ============ 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) );

Highstock图表给出了“Uncaught TypeError：无法读取属性'addPoint'的未定义”错误

1 个答案: