📌  相关文章
📜  获取值并在条形图中显示 php mysql - PHP (1)

📅  最后修改于: 2023-12-03 14:57:13.624000             🧑  作者: Mango

获取值并在条形图中显示 PHP MySQL

在开发过程中，经常会需要从 MySQL 数据库中获取数据并对其进行可视化呈现。本篇文章将介绍如何使用 PHP 和 MySQL 来获取数据，并使用 JavaScript 和图表库来在条形图中显示该数据。

步骤

  1. 连接到 MySQL 数据库

    <?php
  $servername = "localhost";
  $username = "username";
  $password = "password";
  $dbname = "dbname";
  
  // 创建连接
  $conn = new mysqli($servername, $username, $password, $dbname);
  
  // 检查连接是否成功
  if ($conn->connect_error) {
      die("连接失败: " . $conn->connect_error);
  }
?>

  2. 查询 MySQL 数据库中的数据

    <?php
  $sql = "SELECT name, value FROM mytable";
  $result = $conn->query($sql);
  
  if ($result->num_rows > 0) {
    // 将查询结果转换为数组
    $data = array();
    while($row = $result->fetch_assoc()) {
      array_push($data, array('name' => $row["name"], 'value' => $row["value"]));
    }
  } else {
      echo "0 结果";
  }
?>

  3. 使用 JavaScript 和图表库在条形图中显示数据

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>条形图</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <canvas id="myChart"></canvas>
    <script>
      // 将 PHP 转换的数据传递给 JavaScript
      var data = <?php echo json_encode($data); ?>;

      // 创建数据集
      var dataset = [];
      for (var i = 0; i < data.length; i++) {
        dataset.push(data[i].value);
      }

      // 创建标签
      var labels = [];
      for (var i = 0; i < data.length; i++) {
        labels.push(data[i].name);
      }

      // 创建条形图
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: '数据',
            data: dataset,
            backgroundColor: '#F29F05'
          }]
        },
        options: {}
      });
    </script>
  </body>
</html>
总结

通过使用 PHP 和 MySQL，我们可以轻松地从数据库中获取数据，并将其呈现在条形图中。使用 Chart.js 这样的图表库，我们可以快速创建各种类型的可视化数据，以更好地理解和交流数据。