如何从两个不同 MySQL 表中的两个变量绘制折线图

Question

我是 php 新手，正在学习如何在 MySQL 的两个不同表中为两个不同的温度值绘制折线图。我可以从一个表中获取数据并将其绘制在图表中，但我不知道如何从两个不同的表中获取两个温度值。

第一个表1： 身份证温度 1 20

第二表2： 身份证温度 1 25

data.php 代码：

<?php 
 $servername = "localhost";
 $database = "test";
 $username = "test";
 $password = "12345";

 $connect = mysqli_connect($servername, $username, $password, $database);
 if (!$connect) {
  die("Connection failed: " . mysqli_connect_error());
  }

$query = ("SELECT * FROM Table1 UNION SELECT * FROM Table2");
$result = mysqli_query($connect, $query);

$data = array(); 

if ($result->num_rows > 0) { 
 while ($row = $result->fetch_assoc()) { 

 array_push($data, [$row['time'], floatval($row['temp']), $row['time'], floatval($row['temp'])]); 
 }
 }
  echo json_encode($data);
  mysqli_close($connect);

?>

JS 代码：

setInterval(function () {

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

  function drawLineColors() {

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

  data.addColumn('string', 'Date');
  data.addColumn('number', 'Temperature');
   
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Temperature2');
   

var jsonData = $.ajax({
    url: "data.php",
    dataType: "json",
    async: false
    }).responseText;
    
var obj = JSON.parse(jsonData);

data.addRows(obj);

let rowIndex = data.getNumberOfRows() - 1; //gets the row index of last row
let lastTime = data.getValue(rowIndex, 0); //gets the first column
let lastTemp = data.getValue(rowIndex, 1); //gets second column

let rowIndex2 = data.getNumberOfRows() - 1; //gets the row index of last row
let lastTime2 = data.getValue(rowIndex, 0); //gets the first column
let lastTemp2 = data.getValue(rowIndex,1); //gets third column

console.log(` ${lastTemp}, ${lastTemp2}`);
 
    $(".TempStatus").html(lastTemp + " °C");
    $(".Temp2Status").html(lastTemp2 + " °C");

   var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Sensors Scale'
    },
    colors: ['#a52714', '#097138']
  };
  var chart = new  google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(data, google.charts.Line.convertOptions(options));
   }
    }, 5000);

 

如何从两个表中获取两个温度值？

Answer 1

首先，让我们分别查询两个表。
然后组合响应的数据，Table1 & Table2...

<?php
  $servername = "localhost";
  $database = "test";
  $username = "test";
  $password = "12345";

  $connect = mysqli_connect($servername, $username, $password, $database);
  if (!$connect) {
    die("Connection failed: " . mysqli_connect_error());
  }

  $data = array(
    'Table1' => array(),
    'Table2' => array()
  );

  $query = ("SELECT * FROM Table1");
  $result = mysqli_query($connect, $query);
  if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
      array_push($data['Table1'], [$row['time'], floatval($row['temp'])]);
    }
  }

  $query = ("SELECT * FROM Table2");
  $result = mysqli_query($connect, $query);
  if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
      array_push($data['Table2'], [$row['time'], floatval($row['temp'])]);
    }
  }

  echo json_encode($data);
  mysqli_close($connect);
?>

---

在绘制图表时，我们只能有一个 x 轴。
所以我们需要在时间列上连接两个表。

但首先，谷歌图表只需要加载一次。
不是每次我们绘制图表。
所以我们将首先加载谷歌图表，然后再进行其他操作。

而且我们不知道获取数据和绘制图表需要多长时间。
我们将在第一次抽奖结束后使用setTimeout，而不是使用setInterval。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Sensors Scale'
    },
    colors: ['#a52714', '#097138']
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'ready', function () {
    setTimeout(drawLineColors, 5000);
  });

  drawLineColors();

  function drawLineColors() {
    var data1 = new google.visualization.DataTable();
    data1.addColumn('string', 'Date');
    data1.addColumn('number', 'Temperature');

    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'Date');
    data2.addColumn('number', 'Temperature');

    $.ajax({
      url: 'data.php',
      dataType: 'json',
    }).done(function (jsonData) {
      data1.addRows(jsonData.Table1);
      data2.addRows(jsonData.Table2);

      var joinData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);

      var rowIndex = data1.getNumberOfRows() - 1;
      var lastTime = data1.getValue(rowIndex, 0);
      var lastTemp = data1.getValue(rowIndex, 1);
      var rowIndex2 = data2.getNumberOfRows() - 1;
      var lastTime2 = data2.getValue(rowIndex2, 0);
      var lastTemp2 = data2.getValue(rowIndex2, 1);
      $(".TempStatus").html(lastTemp + " °C");
      $(".Temp2Status").html(lastTemp2 + " °C");

      chart.draw(joinData, options);
    });
  }
});

其他注意事项...

1. ajax 上的async: false 已被弃用，请改用done 回调。
2. 不需要谷歌图表中的'line' 包，它用于材料折线图。
   您正在使用经典折线图 --> google.visualization.LineChart
   材料 --> google.charts.Line
   同样，不需要转换经典图表的选项，
   已移除 --> google.charts.Line.convertOptions