Почему мой addPoint() не распознан как функция в моем коде highcharts?

Я работаю с Highcharts и живыми данными. Я правильно настроил свой ajax, и кажется, что у него есть вызов setTimeout для вывода живых данных. Всякий раз, когда эти данные поступают, я хочу добавить() в мою серию и нарисовать новый график (смещение влево). Ниже мой код, строка 85 - это вызов .addPoint, но вы увидите в консоли, что он отображается как не функция или неопределенный.Почему мой addPoint() не распознан как функция в моем коде highcharts?

Я также знаю из консоли, что я правильно возвращаю данные из своей диаграммы (chart1.data.series [0] возвращает и объект). Вот основная документация по серийным данным и addPoint: < >

Любая идея, где я пошла не так? Я новичок в js 1 год <. поэтому я ценю всю вашу помощь!

<!doctype html> 
<html> 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
</head> 

<body> 
    <div id="container" style="width:100%"></div> 
</body> 
<script> 
chart1 = { 
    yAxisMin: null, 
    yAxisMax: null 
}; 
// empty objects for our data and to create chart 
seriesData = []; 
BPM = []; 
time1 = []; 

// console.log(chart1.data.series); 

$(function() { 
    $(document).ready(function() { 
     Highcharts.setOptions({ 
      global: { 
       useUTC: false 
      } 
     }); 


     function requestData() { 
      var url = 'http://msbandhealth.azurewebsites.net/odata/PulsesAPI/'; 
      $.ajax({ 
       url: url, 
       dataType: 'json', 
       context: seriesData, 
       success: function(data) { 

        shift = chart1.data.series[0].data.length > 20; 
        // structure our data 
        for (var i = 0; i < data.value.length; i++) { 
         bpm = data.value[i].BPM; 
         time = data.value[i].Time; 
         console.log(time); 
         this.push([time, BPM]); 
         BPM.push(bpm); 
         time1.push(time); 
        } 

        // console.log(series[0]); 
        // find the highest pulse so we can set it to the highest y point 
        chart1.yAxisMax = (function(array) { 
         var pulse_array = []; 

         for (var i = 0; i < array.length; i++) { 
          if (array[i] != null) { 
           pulse_array.push(array[i]); 
          } 
         } 
         return Math.max.apply(Math, pulse_array); 
        })(BPM); 

        // find the lowest pulse rate and set it to lowest y point 
        chart1.yAxisMin = (function(array) { 
         var pulse_array = []; 

         for (var i = 0; i < array.length; i++) { 
          if (array[i] != null) { 
           pulse_array.push(array[i]); 
          } 
         } 
         return Math.min.apply(Math, pulse_array); 
        })(BPM); 

        // set our data series and create new chart 
        chart1.data.series[0].data = BPM; 

        chart = new Highcharts.Chart(chart1.data); 
        $('#container').css({ 
         height: '400px' 
        }); 

        chart1.data.series[0].addPoint(BPM, true, true); 

        // setTimeout(requestData, 3000); 
        console.log(chart1.data.series); 
       } 

      }); 
     } 

     // give highcharts something to render to 
     container = document.getElementById("container"); 

     chart1.data = { 

      chart: { 
       renderTo: container, 
       type: 'spline', 
       animation: Highcharts.svg, // don't animate in old IE 
       marginRight: 10, 
       events: { 
        load: requestData() 
       } 
      }, 
      title: { 
       text: ' Real Time Pulse Analysis' 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickPixelInterval: 150 
      }, 
      yAxis: { 
       min: chart1.yAxisMin, 
       max: chart1.yAxisMax, 
       title: { 
        text: 'Heart Rate' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>' + this.series.name + '</b><br/>' + 
         Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' + 
         Highcharts.numberFormat(this.y, 2); 
       } 
      }, 
      legend: { 
       enabled: false 
      }, 
      exporting: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Beats Per Minute', 
       data: [] 
      }] 


     }; 

    }); 
}); 
</script> 

</html>

источник

2015-04-17 ssl

** UPDATE ** пришлось добавить moment.js правильно разобрать на ось х моего Дейта. addPoint все еще не работает так, как я этого хочу. Я хочу, чтобы мои очки сдвигались с диаграммы влево и вводились вправо в заданное время. вместо этого он перерисовывает весь график в интервале. это то, что я собираюсь: http://www.highcharts.com/demo/dynamic-update – ssl

Вы должны использовать ссылку на диаграмму, а затем вызвать addPoint вместо ссылки на объект конфигурации диаграммы.

Правильная форма: chart.series[0].addPoint()

источник

2015-04-17 09:36:48

Как вы используете ссылку на график? Прямо сейчас мой объект диаграммы называется chart1.data и сделан там. Но можете ли вы привести мне пример того, как вы ссылаетесь? Я смущен. Спасибо. – ssl

Вам нужно ссылаться на переменную, где хранится таблица (chart = new Highcharts.Chart (chart1.data)), поэтому addPoint необходимо вызывать на chart.series [0] .addPoint. –

ОК, похоже, делает трюк спасибо. третий параметр установлен в true, и график все еще накапливает данные на экране. Вы знаете, почему смена не работает? – ssl

Почему мой addPoint() не распознан как функция в моем коде highcharts?

ответ

Смежные вопросы