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

Question

大家好，所以我有脚本.js它是从我的数据库获取数据（读取.php作为API），并将数据存储在我的索引.html文件的表中。数据库中的列是：日期、温度、压力和 RPM。我现在拥有的是3个图表，包括3条线 -->温度+压力+rpm。但是我怎么能拆分数据以在自己的谷歌折线图中显示每个元素。所以我希望有3个折线图：1个温度图表+ 1个压力图表+ 1个rpm图表。我必须保留1个包含所有数据的表。

"use strict";

google.charts.load('current', {packages: ['controls', 'line', 'table']});

document.getElementById('get').addEventListener('click', getData);

async function getData() {

  let response = await fetch("http://localhost:8000/read1.php");

  let json = await response.json();    

  var data = new google.visualization.DataTable();

  data.addColumn('string', 'date');

  data.addColumn('number', 'temperature');

  data.addColumn('number', 'pressure');

  data.addColumn('number', 'rpm');

  for (var i = 0; i < json.length; i++) {

      addRow(json[i]);

      data.addRow(Object.values(json[i]));

    }

  var chartTemp = new google.visualization.ChartWrapper({

    chartType: 'Line',

    containerId: 'temperature_data',

    dataTable: data,

    options: {

      chart: {

        title: 'Temperature',

        subtitle: ''

      },

      height: 300

    },

    view: {

      columns: [1 , 2]

    }

  });

  chartTemp.draw();

  var chartPres = new google.visualization.ChartWrapper({

    chartType: 'Line',

    containerId: 'pressure_data',

    dataTable: data,

    options: {

      chart: {

        title: 'Pressure',

        subtitle: ''

      },

      height: 300

    },

    view: {

      columns: [1 , 3]

    }

  });

  chartPres.draw();

  var chartRPM = new google.visualization.ChartWrapper({

    chartType: 'Line',

    containerId: 'rpm_data',

    dataTable: data,

    options: {

      chart: {

        title: 'RPM',

        subtitle: ''

      },

      height: 300

    },

    view: {

      columns: [1 , 4]

    }

  });

  chartRPM.draw();

  var chartTable = new google.visualization.ChartWrapper({

    chartType: 'Table',

    containerId: 'table_data',

    dataTable: data,

    options: {}

  });

  chartTable.draw();

}

这是我的脚本，目前我有3个图表，但它们都显示3个元素，我怎么能拆分它？

Answer 1

建议使用图表包装器类来绘制图表。谷歌图表也有一个表格图表，所以你可以使用它，而不是手动构建表格。表格图表会生成一个普通的 html 表格，因此您可以应用当前拥有的任何样式。加上它有内置的排序...首先，将 和 包添加到 load 语句。'controls''table'google.charts.load('current', {&nbsp; packages: ['controls', 'line', 'table']}).then(function () {&nbsp; document.getElementById('get').addEventListener('click', getData);});还建议使用load语句返回的承诺，以确保Google图表已加载，在分配点击事件之前，请参阅上文...接下来，图表包装器有一个属性。这允许您直接在图表上应用视图。您可以使用它来控制图表中包含数据表中的哪些列...viewvar chartTemp = new google.visualization.ChartWrapper({&nbsp; chartType: 'Line',&nbsp; containerId: 'temperature_data',&nbsp; dataTable: data,&nbsp; options: {&nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; title: 'Temperature',&nbsp; &nbsp; &nbsp; subtitle: ''&nbsp; &nbsp; },&nbsp; &nbsp; height: 300&nbsp; },&nbsp; view: {&nbsp; &nbsp; columns: [0, 1]&nbsp; // <-- include x-axis and temperature columns&nbsp; }});chartTemp.draw();有关示例，请参阅以下工作片段...google.charts.load('current', {&nbsp; packages: ['controls', 'line', 'table']}).then(getData);function getData() {&nbsp; var data = new google.visualization.DataTable();&nbsp; data.addColumn('string', 'date');&nbsp; data.addColumn('number', 'temperature');&nbsp; data.addColumn('number', 'pressure');&nbsp; data.addColumn('number', 'rpm');&nbsp; for (var i = 0; i < 12; i++) {&nbsp; &nbsp; data.addRow([(i + 1) + '/2020', (5 * i), (10 * i), (15 * i)]);&nbsp; }&nbsp; var chartTemp = new google.visualization.ChartWrapper({&nbsp; &nbsp; chartType: 'Line',&nbsp; &nbsp; containerId: 'temperature_data',&nbsp; &nbsp; dataTable: data,&nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; &nbsp; title: 'Temperature',&nbsp; &nbsp; &nbsp; &nbsp; subtitle: ''&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; height: 300&nbsp; &nbsp; },&nbsp; &nbsp; view: {&nbsp; &nbsp; &nbsp; columns: [0, 1]&nbsp; &nbsp; }&nbsp; });&nbsp; chartTemp.draw();&nbsp; var chartPres = new google.visualization.ChartWrapper({&nbsp; &nbsp; chartType: 'Line',&nbsp; &nbsp; containerId: 'pressure_data',&nbsp; &nbsp; dataTable: data,&nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; &nbsp; title: 'Pressure',&nbsp; &nbsp; &nbsp; &nbsp; subtitle: ''&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; height: 300&nbsp; &nbsp; },&nbsp; &nbsp; view: {&nbsp; &nbsp; &nbsp; columns: [0, 2]&nbsp; &nbsp; }&nbsp; });&nbsp; chartPres.draw();&nbsp; var chartRPM = new google.visualization.ChartWrapper({&nbsp; &nbsp; chartType: 'Line',&nbsp; &nbsp; containerId: 'rpm_data',&nbsp; &nbsp; dataTable: data,&nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; &nbsp; title: 'RPM',&nbsp; &nbsp; &nbsp; &nbsp; subtitle: ''&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; height: 300&nbsp; &nbsp; },&nbsp; &nbsp; view: {&nbsp; &nbsp; &nbsp; columns: [0, 3]&nbsp; &nbsp; }&nbsp; });&nbsp; chartRPM.draw();&nbsp; var chartTable = new google.visualization.ChartWrapper({&nbsp; &nbsp; chartType: 'Table',&nbsp; &nbsp; containerId: 'table_data',&nbsp; &nbsp; dataTable: data,&nbsp; &nbsp; options: {}&nbsp; });&nbsp; chartTable.draw();}<script src="https://www.gstatic.com/charts/loader.js"></script><div id="dashboard">&nbsp; <div id="temperature_data"></div>&nbsp; <div id="pressure_data"></div>&nbsp; <div id="rpm_data"></div>&nbsp; <div id="table_data"></div></div>编辑表格图表应使用元素，类似于其他图表。<div>尝试替换以下内容...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Date</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Temperature</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Pressure</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>RPM</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody id="table_data">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="get">GET</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; </table>跟。。。<div id="table_data"></div><button id="get">GET</button>至于样式，不确定它们是如何应用的。如果您在 元素上使用 id...<tbody id="table_data">#table_data {&nbsp; /* styles */}然后替换为...#table_data tbody {&nbsp; /* styles */}