在 PHP 的 .js 文件中使用来自 SQL 数据库的数据

Question

我在页面上使用 chart.js，我想使用存储在 SQL 数据库中的数据作为 chart.js

的数据

chart.js 代码段如下所示：

// Chart Data
var chartData = {
    labels: ["Jänner", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
    datasets: [{
        label: "Wert Verkaufter Waren 2022 - Standorte kumuliert",


        //Data for Graph
        data: [65, 59, 80, 81, 56, 55, 40],


        fill: false,
        borderDash: [5, 5],
        borderColor: "#346200",
        pointBorderColor: "#346200",
        pointBackgroundColor: "#FFF",
        pointBorderWidth: 2,
        pointHoverBorderWidth: 2,
        pointRadius: 4,
    }]
};

数据值 [65, 59, 80, 81, 56, 55, 40] 是我想用我的数据库中的数据替换的值。

我可以使用 php 存档吗？

Answer 1

当然你可以用PHP来实现。

有两种方法可以做到这一点：

将 PHP 内联代码添加到您网页中的 JavaScript 数据。
创建一个额外的 PHP 脚本，从您的数据库中获取数据并将其输出为 JSON。然后 JavaScript 可以从额外的 PHP 脚本中获取 JSON。

第一种方法是这样的。请记住，这是一个草图，不包括错误处理、安全最佳实践等。

<?php
  $mysqli = new mysqli('localhost', 'my_user', 'my_password', 'my_db');
  $result = $mysqli->query("SELECT wert FROM verkaeufe_monatlich;");
  $data = $result->fetch_all();
  $mysqli->close();
?>
<html>
<!-- Your normal webpage html content -->
<script>
var chartData = {
    labels: ["Jänner", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
    datasets: [{
        label: "Wert Verkaufter Waren 2022 - Standorte kumuliert",


        //Data for Graph
        data: <?php echo json_encode($data); ?>,


        fill: false,
        borderDash: [5, 5],
        borderColor: "#346200",
        pointBorderColor: "#346200",
        pointBackgroundColor: "#FFF",
        pointBorderWidth: 2,
        pointHoverBorderWidth: 2,
        pointRadius: 4,
    }]
};
</script>
</html>

对于第二种方法，创建一个单独的 PHP 脚本，大致包含上述数据库逻辑和 JSON 编码，并从您的脚本中调用它，如下所示：

<script>
fetch('/database-query.php')
  .then(response => response.json())
  .then(jsonData => {
    const chartData = {
      labels: ["Jänner", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
      datasets: [{
        label: "Wert Verkaufter Waren 2022 - Standorte kumuliert",
        data: jsonData,
        fill: false,
        borderDash: [5, 5],
        borderColor: "#346200",
        pointBorderColor: "#346200",
        pointBackgroundColor: "#FFF",
        pointBorderWidth: 2,
        pointHoverBorderWidth: 2,
        pointRadius: 4,
      }]
    };
    // do stuff with chartData
  })
  .catch(error => {
    console.error(error);
  });
</script>

在 PHP 的 .js 文件中使用来自 SQL 数据库的数据

Use data from SQL database in .js file with PHP

javascript

php

sql

chart.js