我是Highcharts和Web开发的新手 . 我希望每次在REST API中记录新数据时都会更新图表 . 我不希望每次都重绘图表,而只是添加新的数据点 .

更新方法的文档是:http://api.highcharts.com/highcharts/Chart.update

我不知道如何继续从REST API查询数据并且只更新,而不是每次发送查询时重绘图表 . 现在每次重绘图表的原因是因为 var chartupdat() 方法中声明,该方法每3秒调用一次 . 应该做的是图表创建一次并每3-5秒更新一次 . 但是,我不确定如何在代码中实现它 . 我已尝试在jQuery方法之后和之外初始化图表,但这也不起作用 .

$(function updat() {
  var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
  var humid = [],
    date = [],
    high=[],
    day=[],
    chanceOfRain=[],
    humid_final = [],
    day_final=[],
    high_final=[],
    chanceOfRain_final=[],
    Itemss=[],
    SortedItems=[]
    var htmlText='';

  $.getJSON(url, function (json) {

      setTimeout( $(json['Items']).each(function(i, data) {
      //Store indicator name
      
      // fill the date array
      humid.push(data.humidity);
      // fill the string data array 
      date.push(data.Date);
      high.push(data.high);
      day.push(data.Day);
      chanceOfRain.push(data.chanceOfRain);
    }),3000);

   	//unsorted array
    Itemss=$(json['Items']);
    //console.log("ITEMS",Itemss);

    //sorted array- date
     date.sort(function(a,b) { return a - b;});


    // console.log("Sorted Days", date);
    Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
   
   
    // query send string that we need to convert into numbers
    for (var i = 0; i < humid.length; i++) {
      if (humid[i] != null) {
        humid_final.push(parseFloat(humid[i]));
        high_final.push(parseFloat(high[i]));
        day_final.push(parseFloat(day[i]));
        chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
      } else {
       humid_final.push(null)
      };
    }

    //sorting the arrays
    day_final.sort(function(a,b) { return a - b;});
  
    humid_final.sort(function(a,b) { return a - b;});

      var chart = new Highcharts.chart({

          credits: {
              enabled: false
          },
          chart: {
              height: 200,
              type: 'spline',
              renderTo: 'light',
              marginBottom: 100
          },
          title: {
              text: ' Ambient Light'
          },
          tooltip: {
              valueDecimals: 2,
              pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b>
' }, plotOptions: { series: { marker: { enabled: false } } }, subtitle: { text: '' }, xAxis: { categories: day_final }, series: [{ name: 'light level', data: high_final, // color: '#9b0000' }] }); }); //getJSON method setTimeout(updat, 3000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "highCU.js"></script>

<div id="light" style="min-width: 310px; height: 200px; left:10px"></div>