在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', {

  packages: ['controls', 'line', 'table']

}).then(function () {

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

});

还建议使用load语句返回的承诺，

以确保Google图表已加载，在分配点击事件之前，请参阅上文...

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

这允许您直接在图表上应用视图。

您可以使用它来控制图表中包含数据表中的哪些列...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>

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

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

#table_data {

  /* styles */

}

然后替换为...

#table_data tbody {

  /* styles */

}