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

Question

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

"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();
}

<!DOCTYPE html>
    <html>

    <head>
    <title>Sensor Data</title> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style2.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
       <header id="main-header">
        <div class="container">
          <h1><center>Sensor data</center></h1>
        </div>
       </header> 

        <section id="mainpic6">
        </section>

        <h1><center>Visualisation of sensor data --> last 100 records</center></h1>

        <div class="container">


        <section id="main4">

                <table>
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Temperature</th>
                  <th>Pressure</th>
                  <th>RPM</th>
                </tr>
              </thead>
              <tbody id="table_data">
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>

                    <button id="get">GET</button>

              </tbody>
            </table>

        </section>

            <div></div>

            <aside id="sidebar2">

                <div>Temperature Chart</div>
                <div id="temperature_data"></div>
                <div>Pressure Chart</div>
                <div id="pressure_data"></div>
                <div>RPM Chart</div>
                <div id="rpm_data"></div>

            </aside>



        </div>





        <footer id="main-footer">
        <p>Copyright &copy; 2020 Arturas Website</p>
        </footer>

        <script src="script/script2.js"></script>

    </body>

    </html>

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

Answer 1

推荐使用ChartWrapper Class来绘制图表。

google charts也有Table chart，可以直接使用，不用手动建表。
表格图表生成一个普通的 html 表格，因此您可以应用您当前拥有的任何 styles。
此外，它还内置了排序功能...

首先，将'controls'和'table'包添加到 load 语句中。

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

还建议使用加载语句返回的 promise，
为确保已加载谷歌图表，在分配点击事件之前，请参见上文...

接下来，ChartWrappers 有一个view属性。
这允许您直接在图表上应用视图。
您可以使用它来控制数据表中的哪些列包含在图表中...

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();

---

有关示例，请参见以下工作片段...

 google.charts.load('current', { packages: ['controls', 'line', 'table'] }).then(getData); function getData() { 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 < 12; i++) { data.addRow([(i + 1) + '/2020', (5 * i), (10 * i), (15 * i)]); } var chartTemp = new google.visualization.ChartWrapper({ chartType: 'Line', containerId: 'temperature_data', dataTable: data, options: { chart: { title: 'Temperature', subtitle: '' }, height: 300 }, view: { columns: [0, 1] } }); chartTemp.draw(); var chartPres = new google.visualization.ChartWrapper({ chartType: 'Line', containerId: 'pressure_data', dataTable: data, options: { chart: { title: 'Pressure', subtitle: '' }, height: 300 }, view: { columns: [0, 2] } }); chartPres.draw(); var chartRPM = new google.visualization.ChartWrapper({ chartType: 'Line', containerId: 'rpm_data', dataTable: data, options: { chart: { title: 'RPM', subtitle: '' }, height: 300 }, view: { columns: [0, 3] } }); chartRPM.draw(); var chartTable = new google.visualization.ChartWrapper({ chartType: 'Table', containerId: 'table_data', dataTable: data, options: {} }); chartTable.draw(); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="dashboard"> <div id="temperature_data"></div> <div id="pressure_data"></div> <div id="rpm_data"></div> <div id="table_data"></div> </div>

---

编辑

表格图表应使用<div>元素，类似于其他图表。

尝试替换以下...

           <table>
          <thead>
            <tr>
              <th>Date</th>
              <th>Temperature</th>
              <th>Pressure</th>
              <th>RPM</th>
            </tr>
          </thead>
          <tbody id="table_data">
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>

                <button id="get">GET</button>

          </tbody>
        </table>

和...

<div id="table_data"></div>
<button id="get">GET</button>

至于 styles，不确定它们是如何应用的。

如果您在<tbody id="table_data">元素上使用 id...

#table_data {
  /* styles */
}

然后替换为...

#table_data tbody {
  /* styles */
}