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

Question

我是 php 的新手，并且知道如何在 MySQL 的两个不同表中为两个不同的温度值绘制折线图。我可以从一个表中获取数据并将其绘制在图表中，但我无法弄清楚如何从两个不同的表中获取两个临时值。第一个表1： ID 温度 1 20第二表2： ID 温度 1 25数据.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);?>如何从两个表中获取两个温度值？

Answer 1

首先，我们分别查询两个表。

然后合并响应数据，Table1Table2

<?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轴。

所以我们需要在时间列上连接两个表。

但首先，谷歌图表只需要加载一次。

不是每次我们绘制图表时。

所以我们首先加载谷歌图表，然后再进行其他操作。

而且我们并不确切知道需要多长时间才能获取数据并绘制图表。

使用，而不是使用 。setIntervalsetTimeout

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 + " &deg;C");

      $(".Temp2Status").html(lastTemp2 + " &deg;C");

      chart.draw(joinData, options);

    });

  }

});

其他注意事项...

1. async: false在 ajax 已被弃用的情况下，请改用回调。done

2. 
   
   也一样，不需要转换经典图表的选项，
   
   'line'google.visualization.LineChartgoogle.charts.Linegoogle.charts.Line.convertOptions