Question

我将使用存储在MariaDB服务器中的实时温度值在网络上显示实时图形。（温度值每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的值。

我使用Google翻译进行了翻译，因为我不会英语。我要感谢大家的答复。

Answer 1

在标题中添加内容类型：

<?php 
header("Content-type: application/json; charset=utf-8");

Answer 2

您可以使用chart.js库。简单而强大 https://www.chartjs.org

以下是一些使用示例： https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/

Answer 3

首先：欢迎来到SO :)

我认为您的数据的数据格式错误。你有一个对象数组

[{"temp1":17.93},....]

但是示例中说：

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

一个数组数组。试试这个：

<?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)) {
            $response["temp"][] = array("temp1", $row["temp1"]);  // <-- change this line
        }
        echo json_encode($response,JSON_NUMERIC_CHECK);
    } else {
        echo json_encode("0 results",JSON_NUMERIC_CHECK);
    }

    mysqli_close($conn);
?>

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

3 个答案: