Amcharts 从外部来源（温度）为数据集添加价值答案

【问题标题】：Amcharts add value to dataset from external source (temperatue)Amcharts 从外部来源（温度）为数据集添加价值
【发布时间】：2016-11-04 20:32:48
【问题描述】：

我有一个通过 http 连接的温度传感器，我想每 5 秒将温度添加到 Amcharts。有人举个例子如何为当前数据集添加新值？我将使用折线图表示 y 轴上的温度和 x 上的日期时间

谢谢

【问题讨论】：

标签： javascript ajax amcharts

【解决方案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 );

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

【讨论】：

【解决方案2】：

好的.. 我已经完成了这个示例，但它只显示了一个值。这是因为 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>

【讨论】：

是的，因为您从一个值开始，所以 shift 只是在下一次调用中将其删除。省略 chart.dataProvider.shift() 调用，或者，如果您想最终开始删除点，您可以将其包装在检查其长度 like in this example 中。请注意，我将 minPeriod 更改为“ss”，因为您的数据每秒都会出现。另外，仅供参考，这应该是对我的答案的评论，其中将详细信息编辑到您的原始问题中，而不是新答案，因为其他人不会收到有关新答案的通知。