使用谷歌折線圖實時移動x軸

Question

我對 Google 圖表有疑問，

通過此鏈接使用 Google Charts 進行實時變化點圖表並沒有太大幫助，因為我希望能夠實現類似http://www.jqueryflottutorial.com/tester-10.html

有沒有辦法讓我做到這一點？

我用谷歌搜索了這個，似乎找不到任何解決方案。

請幫忙

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);

對於不同的間隔