更新高级图表而不重绘

Question

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

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

我不确定如何继续从REST API查询数据并且只更新，而不是每次发送查询时重绘图表。现在每次重绘图表的原因是因为在var chart方法中声明updat()，每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><br/>'
          },
          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>