谷歌图表的实时变化点图答案

【问题标题】：Real-time changing point chart with Google Charts谷歌图表的实时变化点图
【发布时间】：2016-12-02 09:26:15
【问题描述】：

我对谷歌图表有疑问。我已经为这个问题苦苦挣扎了两天，似乎找不到解决方案。

我想创建一个监控系统，我可以在其中看到有两条线的不断变化的折线图。我在 JS 代码中生成数据（至少现在是这样）。

我不知道我做错了什么。我可以使用非常简单的静态示例使图表可见，但是一旦我尝试向图表添加一些数据，它就会停止绘制。

当前版本的错误是：

“未捕获的类型错误：无法读取未定义的属性‘长度’”

但这是我第 n 次尝试向图表添加更多数据的不同方法以及第 n 个不同的错误。因此，如果有人知道将数据添加到谷歌图表的工作原理，那就太好了。

提前致谢。

setInterval(function() {  
  //this is how I create a random data and call the drawChart function.
  var temperature = (Math.random() * (35 - 30) + 30).toFixed(1),
      humidity = (Math.random() * (40 - 15) + 15).toFixed(1),
      timestamp = new Date();
  google.charts.setOnLoadCallback(drawChart(timestamp, temperature, humidity));
}, 5000);

function drawChart(timestamp, temperature, humidity) {
  //Cast temperature to proper format for the chart
  //This works...don't understand why but it does.
  temperature = parseFloat("temperature");
  humidity = parseFloat("humidity");  

  // Define the chart to be drawn.
  var data = new google.visualization.DataTable();

  if (data[0].length == 0) {
    var datetime = new Date();
    data.addColumn('datetime', 'Time');
    data.addColumn('number', 'Temperature');
    data.addColumn('number', 'Humidity');
    data.addRow(datetime, 0, 0);

    var options = {
      'title' : 'Temperature and Humidity',
      hAxis: {title: 'Time'},
      vAxis: {title: 'Temperature and Humidity'},   
      'width':550,
      'height':400	  
    };
  }
  data.addRow(timestamp, temperature, humidity);
  // Instantiate and draw the chart.
  var chart = new google.visualization.LineChart(document.getElementById('monitor-chart'));
  chart.draw(data, options);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Projekti 1, sivusto</title>

    <!-- Latest BOOTSTRAP minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Latest BOOTSTRAP JC-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- JS Generate new data Class -->
    <script type="text/javascript" src="js/generate_data.js"></script>

    <!-- GOOGLE CHARTS visualization -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['corechart','line']});  
    </script>

    <!-- My css file -->
    <link rel="stylesheet" type="text/css" href="css/ulkoasu.css"/>

  </head>
  <body>
    <article>
      <h1>This is Monitor content</h1>
      <div id="monitor-data"></div>
      <div id="monitor-chart"></div>
    </article>
  </body>
</html>

【问题讨论】：

不，它在同一个文件 atm.一切都在标签的末尾。

标签： javascript charts google-visualization

【解决方案1】：

首先，setOnLoadCallback 的参数应该是对函数的引用，如下所示...

google.charts.setOnLoadCallback(drawChart);

不是函数调用的结果...

google.charts.setOnLoadCallback(drawChart(timestamp, temperature, humidity));

和 setOnLoadCallback 通常在每次页面加载时仅使用一次，
回调第一次完成后，不再需要此方法

无论如何，callback 可以添加到 load 语句中
setOnLoadCallback 并不是真正需要的

其他错误包括使用addRow --> data.addRow(timestamp, temperature, humidity);

列值应该在数组中传递...

data.addRow([timestamp, temperature, humidity]);

推荐类似于以下的设置 -- 当回调触发时，
图表、选项、数据表等所有资源均已创建

drawChart只是用来加一行，绘制图表

请参阅以下工作 sn-p...

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, 5000);
    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) {
      data.addRow([timestamp, temperature, humidity]);

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

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

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

【讨论】：

这正是我想做的！非常感谢！仍然不明白前 2 行，但我想我必须用谷歌搜索 google.charts.load 的东西。关于你所说的 data.AddRow 应该是数组格式。我在官方文档中读到 data.AddRows 应该是数组格式，但是有一个例子 data.AddRow 是像我在我的代码中那样编写的。我想这只是文档中的一个错误。
addRow 接受数组 [col1, col2] -- addRows 接受数组数组 [[col1, col2], [col1, col2]]