个人中心
gpt4 book ai didi

javascript - 使用 Google Charts 实时变化的点位图

转载 作者：塔克拉玛干 更新时间：2023-11-02 20:56:19 27 4
gpt4 key购买 nike

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

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

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

当前版本的错误是:

"uncaught TypeError: Cannot read property 'length' of undefined"

但这是我第 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>

最佳答案

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

google.charts.setOnLoadCallback(drawChart);

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

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

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

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

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

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

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

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

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

请参阅以下工作片段...

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>

关于javascript - 使用 Google Charts 实时变化的点位图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40928712/

27 4 0
文章推荐： Android Xoom 加速度计精度总是不可靠
文章推荐： javascript - 数组作为文字对象中的属性
文章推荐： android如何为TextView制作工具提示
文章推荐： javascript - vscode 可以支持 ES6 导入的绝对路径引用吗？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com