php - 如何从数据库（MySQL）中获取数据并从 highcharts 中绘制实时图表

问题描述

我将使用存储在 MariaDB 服务器中的实时温度值在 Web 上显示实时图表。（温度值每 5 秒实时累积一次。）

经过大量的反复试验，我认为 Highcharts.js 将是绘制图表的最佳工具。

https://www.highcharts.com/stock/demo/dynamic-update

上面的链接是我使用的演示源。

我一直在尝试做的最多的事情是我在酒吧里放了很多东西。

我在系列的 data.push 中尝试了各种东西。

（我是编码的初学者......）

我不知道我打错了什么，所以我输入了所有内容。对不起。


<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script type="text/javascript"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>


  <script>

 Highcharts.stockChart('container', {
  chart: {
    events: {
      load: function() {

       var series = this.series[0];



setInterval(function() {


                 $(document).ready(function() {
                 var url = "https://---include json---.php";
                $.getJSON(url, function(json) {
                    var val= json;
                    var temp1=(json['temp'][(Object.keys(json['temp']).length)-1]['temp1']); 
                    console.log(json['temp'][(Object.keys(json['temp']).length)-1]['temp1']);
                    })});


          var x = (new Date()).getTime() // current time
          var y = temp1;

           Math.round(Math.random() * 100);
          series.addPoint([x, y], true, true);//연속
        }, 1000);
      }
    }
  },



  time: {
    useUTC: false
  },

  rangeSelector: {
    buttons: [{
      count: 1,
      type: 'minute',
      text: '1M'
    }, {
      count: 5,
      type: 'minute',
      text: '5M'
    }, {
      type: 'all',
      text: 'All'
    }],
    inputEnabled: false,
    selected: 0
  },

  title: {
    text: 'TEST test'
  },

  exporting: {
    enabled: true
  },
  credits:{
    enabled:false
  },


  series: [
  {
    name: 'Random data',
    data: (function() {     



      // generate an array of random data
      var data = [],
        time = (new Date()).getTime(),
        y;      
      for (i = -999; i <= 0; i += 1) {

          data.push([
          //time + i * 1000, 
          //Math.round(Math.random() * 100)
        ]);
      }
      return data;
    }())
  }]


});


  </script>

下面的php代码是json数据的php代码。


<?php

//Creating Array for JSON response
$response = array();

$servername = "localhost";
$username = "";
$password = "!";
$dbname = "";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
   die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM temp2 order by id asc";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
$response["temp"] = array();
while($row = mysqli_fetch_array($result)) {
$temp = array();      
$temp["temp1"] = $row["temp1"];
array_push($response["temp"], $temp);
          }
      echo json_encode($response,JSON_NUMERIC_CHECK);
} else {
    echo json_encode("0 results",JSON_NUMERIC_CHECK);
}

mysqli_close($conn);



?>

上述代码值的输出如下所示。

{"temp":[
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.82},
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},  
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},
  {"temp1":18.05},{"temp1":17.93},{"temp1":17.82},{"temp1":17.93},
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},
  {"temp1":17.82},{"temp1":18.05},{"temp1":17.93},{"temp1":17.93},
  {"temp1":17.93}
]}

如果您运行代码，图形将不会出现在屏幕上。

我不知道如何在图表上打印出 json 的值。

我用谷歌翻译翻译了它，因为我不擅长英语。我要感谢大家的回复。

标签： phphtml

php - 如何从数据库（MySQL）中获取数据并从 highcharts 中绘制实时图表

问题描述

解决方案

推荐阅读