在3种不同的Google折线图中可视化数据

Question

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

"use strict";

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

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

function addRow(data) {
    let tBody=document.getElementById("sensorData");
    let row=tBody.insertRow(-1);

    let cell=row.insertCell(-1);
    let dateTextNode=document.createTextNode(data.date);
    cell.appendChild(dateTextNode);

    cell=row.insertCell(-1);
    let temperatureTextNode=document.createTextNode(data.temperature);
    cell.appendChild(temperatureTextNode);

    cell=row.insertCell(-1);
    let pressureTextNode=document.createTextNode(data.pressure);
    cell.appendChild(pressureTextNode);

    cell=row.insertCell(-1);
    let rpmTextNode=document.createTextNode(data.rpm);
    cell.appendChild(rpmTextNode);
}

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

    //loop through the data and add a table row and a chart row for each row received from the server
    for (var i = 0; i < json.length; i++) {
      addRow(json[i]);
      data.addRow(Object.values(json[i]));
    }

    var optionsTemp = {
        chart: {
            title: 'Temperature',
            subtitle: ''
        },

        height: 300
    };

    var chartTemp = new google.charts.Line(document.getElementById('temperature_data'));
    chartTemp.draw(data, google.charts.Line.convertOptions(optionsTemp));

    var optionsPres = {
        chart: {
            title: 'Pressure',
            subtitle: ''
        },

        height: 300
    };

    var chartPres = new google.charts.Line(document.getElementById('pressure_data'));
    chartPres.draw(data, google.charts.Line.convertOptions(optionsPres));

    var optionsRPM = {
        chart: {
            title: 'RPM',
            subtitle: ''
        },

        height: 300
    };

    var chartRPM = new google.charts.Line(document.getElementById('rpm_data'));
    chartRPM.draw(data, google.charts.Line.convertOptions(optionsRPM));

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

Answer 1

建议使用ChartWrapper Class绘制图表。

Google图表也有一个表格图表，因此您可以使用它，而不用手动构建表格。表格图表会生成一个普通的html表格，因此您可以应用当前使用的任何样式。加上内置的排序功能...

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

'table'

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

接下来，ChartWrappers具有

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

属性。这使您可以直接在图表上应用视图。您可以使用它来控制图表中包括数据表中的哪些列...

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