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函数中）

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

这是示例（复制/粘贴）

<!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从外部源（温度）增加数据集的价值

2 个答案: