Javascript 在3个不同的谷歌折线图中可视化数据

大家好，我有script.js，它从我的数据库（以read.php作为API）获取数据，并将数据存储在index.html文件的表中。数据库中的列有：日期、温度、压力和RPM。我现在有3个图表，包括3行-->温度+压力+转速。但是，我如何分割数据以在自己的谷歌折线图中显示每个元素呢。所以我想要3个折线图：1个温度图+1个压力图+1个转速图。我必须保留一个包含所有数据的表

“严格使用”；
load（'current'，{packages:['controls'，'line'，'table']}）；
document.getElementById（'get'）。addEventListener（'click'，getData）；
异步函数getData（）{
let response=等待获取（“http://localhost:8000/read1.php");
让json=wait response.json（）；
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'date'）；
data.addColumn（'编号'，'温度'）；
data.addColumn（'编号'，'压力'）；
data.addColumn（'number'，'rpm'）；
for（var i=0；i

传感器数据
传感器数据
传感器数据可视化-->最后100条记录
日期
温度
压力
转速
得到
温度图
压力图
转速表
版权及副本；2020 Arturas网站

这是我的脚本，目前我有3个图表，但它们都显示了其中的3个元素，我如何拆分它？

建议使用绘制图表

谷歌图表也有一个表格图表，因此您可以使用它，而不是手动构建表格。
表格图表生成普通html表格，因此您可以应用当前拥有的任何样式。
此外，它还内置了排序功能

首先，将

'controls'

和

'table'

包添加到load语句中

google.charts.load('current', {
  packages: ['controls', 'line', 'table']
}).then(function () {
  document.getElementById('get').addEventListener('click', getData);
});

还建议使用load语句返回的承诺，
要确保已加载google图表，请在分配单击事件之前，参见上文

接下来，图表包装器有一个

视图

属性。
这允许您直接在图表上应用视图。
可用于控制图表中包含数据表中的哪些列

var chartTemp = new google.visualization.ChartWrapper({
  chartType: 'Line',
  containerId: 'temperature_data',
  dataTable: data,
  options: {
    chart: {
      title: 'Temperature',
      subtitle: ''
    },
    height: 300
  },
  view: {
    columns: [0, 1]  // <-- include x-axis and temperature columns
  }
});
chartTemp.draw();

var chartTemp=new google.visualization.ChartWrapper({
图表类型：'线'，
集装箱ID:“温度数据”，
数据表：数据，
选项：{
图表：{
标题：“温度”，
副标题：“”
},
身高：300
},
视图：{
columns:[0，1]//感谢您的快速响应如果我尝试在代码中实现它，但它似乎无法处理数据库中的数据我的表没有数据，也没有图表在工作script2.js:19 Uncaught（in promise）ReferenceError:addRow未在HtmlButtoneElement.getData（script2.js:19）中定义请用最新版本的代码更新这个问题好吗？删除这一行-->
addRow（json[i]）；
--函数已被删除。。。