Amcharts 为来自外部源（温度）的数据集增加价值

Question

我有一个通过 http 连接的温度传感器，我想每 5 秒向 Amcharts 添加一次温度。有人举例说明如何为当前数据集添加新值吗？我将使用折线图在 y 轴上表示温度，在 x

上表示日期时间

谢谢

Answer 1

动态更新图表背后的总体思路是将新元素添加到图表的 dataProvider，然后调用其 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 );

它还会将旧数据移出图表，如果图表中添加了很多数据点，您可能需要考虑这一点。常规系列图表的性能会在几百到一千点左右后下降。

Answer 2

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

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

这里是示例 (copy/paste)

<!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>

Amcharts 为来自外部源（温度）的数据集增加价值

Amcharts add value to dataset from external source (temperatue)

javascript

ajax

amcharts