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

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

转载作者：塔克拉玛干更新时间：2023-11-02 20:56:19

27

4

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

我想创建一个监控系统，我可以在其中看到变化的折线图，其中有两条线。我在 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 导入的绝对路径引用吗？

java - 背景随着淡入淡出而过渡/变化
嘿伙计们。实现背景变化(基本上是幻灯片放映)和过渡效果的常见方法有哪些。我想每隔一段时间改变complte文档背景。我是一名 ASP.net 开发人员，并且希望大部分内容都可以在 ASP 中实现。
c++ - 指针随时间的改进/变化？
也许，指针已经在修改过程中指向 auto_ptr 的常规指针指向 unique_ptr 和 shared_ptr 我只是想知道已经开发出来的新型指针是否完全覆盖了旧版本(或者您可能认为存在内存泄漏问题
Android Fragments 变化
我使用 Android Studio 构建 Android 应用。我的问题是:当 fragment 改变时，应用程序崩溃。控制台输出[控制台] 01-06 18:35:21.952 27756-
javascript - 将鼠标悬停在表行上时如何放大表行？ - 变化
****澄清**我做了这个 [Fiddle] ( http://jsfiddle.net/sggPv/10/ ) 来帮助澄清情况。该脚本起初适用于两个表格，但随后当您点击 slider 并将新表格加
html - float 变化
我有图标，单击它会将新的 div(列)添加到 div 容器。问题是，当新的 div(列)出现时，按钮不会向右移动。是否可以以某种方式仅在 div 内添加 position:fixed？这是我的几个屏
Java编译时接口(interface)变化
我是 Java 新手，继承了现有的 Android 应用程序。原始开发人员选择使用常量接口(interface)。我的问题是我需要更改其中一些常量来编译生产应用程序与开发应用程序。如果我手动修改一些
iOS10 UIColor 变化
在 Apple developer Document 中，我在 UIColor 中发现了一些新东西。 If your app was linked on or after iOS 10 and whe
iphone - ShareKit 变化？
我没有经常使用 ShareKit，但我只想拥有三个共享选项:Facebook、Twitter 和电子邮件。 ShareKit 提供了更多选项，包括更多按钮。但是，我不想要“更多”选项，只想要三个。在
javascript - 高效检测单页应用中的 DOM 变化
我正在构建一个 JS 库，其中一个用例要求我在 DOM 更改时触发一个事件，特别是如果它是一个单页应用程序，例如:github search bar 经过一番研究，我遇到了MutationObserv
Excel 检测并跟踪任何工作表中的(值)变化
我已经设法编写了一个代码来检测任何工作表中特定单元格的值变化，但我一直在努力构建检测和跟踪范围(值)变化的东西。例如，如果用户决定复制和粘贴某个范围的数据(假设超过 1 个单元格)，它不会被宏捕获。
audio - 复杂的音频音量随 ffmpeg 变化
使用 ffmpeg ，我们可以对音频电平进行多少控制？例如，我想在程序的时间轴上映射一个“M”形: t0 - t1 : fade in from 0 to 1 t1 - t2 : play at fu
IE8 中的 jQuery on() 变化
使用 jQuery 1.7.1，我尝试为下拉列表上的更改事件创建一个事件处理程序。下拉列表会动态添加到 DOM 中。似乎在大多数浏览器上都能很好地工作，但是哦，奇怪的 IE8 想要变得困难。有解决方法
delphi - 调整非客户区大小后如何反射(reflect)变化？
我想制作一个具有可选边框大小的自定义控件。请参阅下面的代码。边框绘制在非客户区，其宽度可以是 0、1 或 2 像素。我已经在 WM_NCPAINT 中成功完成了边框绘制。问题是，在更改控制边框大小的属
javascript - 检测 URL 变化
我知道这个问题之前已经被问过，而且我实际上已经找到了一些我已经实现的解决方案。不幸的是，我没能得到我想要的。我以前没有做过AngularJS，我想做的是: 检测网址何时更改根据网址更改的内容进行一
AngularJS 观察 DOM 变化
我有一个 auto-carousel 指令，它循环访问链接元素的子元素。但是，子级尚未加载到 DOM 中，因为它们的 ng-if 表达式尚未解析。如何确保父指令知道其 DOM 树已发生更改？
android - 如何观察协程流的 ContentProvider 变化
我有一个流程可以通过内容提供商从数据库中获取数据。 fun getDataFlow(): Flow { return flow { emit(Result.Loading)
javascript - 文本随动画 jquery 变化
我有一些有效的代码，但有时它只是“跳转”到其他文本而不考虑间隔。该代码基本上按时间间隔更改标题的文本。 var text = ["text1", "text2", "text3","text4","
android - 如何监听 SwitchPreferenceCompat 变化
我正在尝试将 onCLick 监听器添加到我的 PreferenceScreen 上的开关，但它不起作用。我尝试了 Java 教程中的代码并将其转换为 Kotlin，但由于某种原因它无法正常工作。这
build - 升级ffmpeg时处理ffmpeg库接口(interface)变化
我们目前正在尝试升级我们的程序使用的 ffmpeg 版本。跳跃很大，因为我们目前使用的是 ffmpeg 0.8，最新版本是 1.2。在这些测试中，我使用的是(让我说)我发现的令人惊叹的软件包 her
android - 如何观察协程流的 ContentProvider 变化
我有一个流程可以通过内容提供商从数据库中获取数据。 fun getDataFlow(): Flow { return flow { emit(Result.Loading)

首页

博学

6Ren·AI

商城

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