使用 google 折线图实时移动 x 轴

Question

我对 Google 图表有疑问，

经历这个link is not much help, as i was hoping to achieve something like this 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);

不同的时间间隔

使用 google 折线图实时移动 x 轴

Real-time moving x axis using google line chart

javascript

jquery

charts

google-visualization