使用 Chart.js 和 PHP 从 MySQL 绘制数据集答案

【问题标题】：Plot dataset from MySQL with Chart.js and PHP使用 Chart.js 和 PHP 从 MySQL 绘制数据集
【发布时间】：2020-03-26 10:46:58
【问题描述】：

我想用 PHP 和 Chart.js 在一个页面中绘制从 MySQL 数据库中获取的一些值。我尝试了这里的建议：Chart with json data

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Demo Charts</title>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Core plugin JavaScript-->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Page level plugins -->
  <script src="vendor/chart.js/Chart.min.js"></script>

  </head>
<body>
<?php


error_reporting(E_ALL);
$conn = new mysqli('localhost', 'root', 'geo777', 'regime_shift');

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }



$select_specie="Specia1";



//query to get data from the table
$query  = 'SELECT  AVG(`CARBON`) AS MedieCarbon, `Year` FROM `fpk20082018` where DENUM="'.$select_specie.'" GROUP BY `Year`';

//execute query
$result = $conn->query($query);

//loop through the returned data
$jsonfile = array();
foreach ($result as $row) {
  $jsonfile[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$conn->close();

$output = json_encode(['jsonarray' => $jsonfile]);
//now print the data
//print $output;

//var_dump($output);
?>
<div class="card-body">
                  <div class="chart-area">
                    <canvas id="canvas"></canvas>
                  </div>
                </div>
              </div>


<script type="text/javascript">

    const useAJAX = false;

$(document).ready(function () {
  if (useAJAX) $.getJSON('data_plot.php').then(showGraph);
  else showGraph(<?= $output ?>);
});

function showGraph(data) {
  console.log(data);
  var labels = output.jsonarray.map(function(e) {
   return e.Year;
});
var data = output.jsonarray.map(function(e) {
   return e.MedieCarbon;
});

var ctx = canvas.getContext('2d');


var config = {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'Medie anuala Carbon',
         data: data,         
         backgroundColor: "rgba(78, 115, 223, 0.05)",
         borderColor: "rgba(78, 115, 223, 1)",
         pointRadius: 3,
         pointBackgroundColor: "rgba(78, 115, 223, 1)",
         pointBorderColor: "rgba(78, 115, 223, 1)",
         pointHoverRadius: 3,
         pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
         pointHoverBorderColor: "rgba(78, 115, 223, 1)",
         pointHitRadius: 10,
         pointBorderWidth: 2
      }]
   }
};

var chart = new Chart(ctx, config);
}


</script>

</body>
</html>

在控制台中的错误是：

未捕获的引用错误：未定义输出

jsonarray 如下所示：

{
    "jsonarray":[
        {
            "MedieCarbon":"0.5194997435897436",
            "Year":"2008"
        },
        {
            "MedieCarbon":"0.04090933333333334",
            "Year":"2010"
        },
        {
            "MedieCarbon":"0.01656",
            "Year":"2011"
        },
        {
            "MedieCarbon":"0.009573333333333335",
            "Year":"2012"
        },
        {
            "MedieCarbon":"0.020583333333333332",
            "Year":"2017"
        }
    ]
}

【问题讨论】：

您已在 PHP 中将 $output 定义为变量，并尝试在 JavaScript 中使用它。那是行不通的。
这能回答你的问题吗？ Pass a PHP array to a JavaScript function

标签： php mysql chart.js

【解决方案1】：

您已在 PHP 中将 $output 定义为变量，并尝试在 JavaScript 中使用它。那是行不通的。尝试在你的 JavaScript 中添加这个：

var object = <?php echo json_encode($object); ?>;

【讨论】：