Amcharts为外部数据源添加数值（温度）

我有一个通过http连接的温度传感器，我想每5秒为Amcharts添加温度。有人举例说明如何为当前数据集添加新值？我会用折线图来表示对Y轴和日期时间温度对XAmcharts为外部数据源添加数值（温度）

谢谢

2016-11-04 Ferguson

总体思路背后动态更新的图表是一个新的元素添加到您的图表的数据提供程序然后调用其validateData方法。虽然它不使用AJAX，this demo基本上在功能奠定了你的框架是所谓的setInterval电话：

setInterval(function() { 
    // make your ajax call here, then on a successful callback: 
    // add data item to the array 
    chart.dataProvider.push({ 
    /* new data */ 
    }); 
    chart.validateData(); 

}, 5000);

它还转移掉的图表中，你可能希望将旧数据考虑是否有很多数据点添加到图表中。常规连续图表的性能会在几百到上千点左右降低。

来源

2016-11-04 21:09:20 xorspark

好的..我已经做了这个例子，但它只显示我一个值。这是因为charData []（数组）只包含一个值？（在generateChartData功能）

我想是画一个随机值，每一秒，每一次的图形推到左侧..

我这里是（复制/粘贴）

<!DOCTYPE html> 
<html> 
    <head> 
     <title>chart created with amCharts | amCharts</title> 
     <meta name="description" content="chart created using amCharts live editor" /> 

     <!-- amCharts javascript sources --> 
     <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
     <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script> 


     <!-- amCharts javascript code --> 
     <script type="text/javascript"> 


      function getRandomArbitrary(min, max) { 
                 return Math.random() * (max - min) + min; 
                } 
      var chartData = generateChartData(); 
      function generateChartData() { 
              var chartData = []; 
              var firstDate = new Date(); 

              firstDate.setSeconds(firstDate.getDate()); 

              chartData.push({ 
               date: firstDate, 
               temp: 0 
              }); 

              return chartData; 
             } 


      var timeout; 
      setInterval(function() { 

       chart.dataProvider.shift(); 

       var newDate = new Date(); 
       var temp = Math.round(Math.random() * 40 + 100); 

      // dodamo podatek v graf 
       chart.dataProvider.push({ 
       date: newDate, 
       temp: temp 
       }); 

       if (timeout) 
       clearTimeout(timeout); 
       timeout = setTimeout(function() { 
       chart.validateData(); 
       }); 
      }, 1000); 


      var chart = AmCharts.makeChart("chartdiv", { 
              "type": "serial", 
              "theme": "light", 
              "dataProvider": chartData, 
              "valueAxes": [ { 
              "position": "left", 
              "title": "Temperatura v °C" 
              } ], 
              "graphs": [ { 
              "valueField": "temp" 
              } ], 
              "categoryField": "date", 
              "categoryAxis": { 
              "minPeriod": "mm", 
              "parseDates": true 
              } 
             }); 
     </script> 
    </head> 
    <body> 
     <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div> 
    </body> 
</html>

来源

2016-11-05 11:04:14 Ferguson

是的，因为你开始了与一个值，转移只是删除它的下一个电话。忽略chart.dataProvider.shift（）调用，或者，如果您想最终开始删除点，则可以在对其长度进行检查时将其打包（如本例中所示）（http://codepen.io/team/amcharts /笔/ 816d3455a31ef901cd164edce4e4d538？编辑= 0010）。请注意，我将minPeriod更改为“ss”，因为您的数据每秒都会传出。另外，仅供参考，这应该是一个评论我的答案与编辑到您的原始问题的细节，而不是一个新的答案，因为其他人不会收到新答案的通知。 – xorspark

Amcharts为外部数据源添加数值（温度）

回答

相关问题