实时移动X轴使用谷歌线图

Question

我有一个与谷歌图表的问题。

通过这个链接 谷歌图表的实时变化点图 是没有太多帮助，因为我希望实现这样的事情 http:/www.jqueryflottutorial.comtester-10.html

有什么办法让我实现这个目标吗？

我已经google了这一点，似乎无法找到任何解决方案。

请帮助

Answer 1

你可以试试这样的东西

    google.charts.load('current', {
      callback: function () {
        var chart = new google.visualization.LineChart(document.getElementById('monitor-chart'));

        var options = {'title' : 'Temperature and Humidity',
          animation: {
            duration: 1000,
            easing: 'out',
            startup: true
          },
          hAxis: {
            title: 'Time'
          },
          vAxis: {
            title: 'Temperature and Humidity'
          },
          height: 400
        };

        var data = new google.visualization.DataTable();
        data.addColumn('datetime', 'Time');
        data.addColumn('number', 'Temperature');
        data.addColumn('number', 'Humidity');

        var formatDate = new google.visualization.DateFormat({pattern: 'hh:mm:ss'});
        var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});

        getTemp();
        setInterval(getTemp, 10000);
        function getTemp() {
          var temperature = (Math.random() * (35 - 30) + 30);
          var humidity = (Math.random() * (40 - 15) + 15);
          var timestamp = new Date();
          drawChart(timestamp, temperature, humidity);
        }

        function drawChart(timestamp, temperature, humidity) {
        if(data.hg.length>1)
        data.removeRow(0);
          data.addRow([timestamp, temperature, humidity]);

          formatDate.format(data, 0);
          formatNumber.format(data, 1);
          formatNumber.format(data, 2);

    //debugger;
          chart.draw(data, options);
        }
      },
      packages:['corechart']
    });

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="monitor-chart"></div>

变价 setInterval(getTemp, 10000);

不同时间段