如何在Chart.js脚本中集成PHP变量作为图表数据？

安全阿岳

2026-5-29

嘿，这事儿不难搞定！咱们直接把静态的数据列表换成PHP动态变量就行，具体操作如下：

步骤1：定义PHP数据变量

先在PHP代码块里定义你的销售数据数组——如果这些数据是从数据库、接口或者其他地方动态获取的，直接把对应结果赋值给这个变量就好：

<?php
// 可以根据需求替换成动态获取的数据（比如从数据库查询）
$salesData = [28, 48, 40, 19, 86, 27, 90, 20, 80, 81, 56, 55];
?>

步骤2：在JS中引用PHP变量

把原来JavaScript里的静态data数组，替换成PHP通过json_encode()输出的JSON格式数据。这个函数能自动把PHP数组转换成JavaScript可识别的数组格式，还能帮你修正语法问题（比如你原数组末尾多余的逗号）：

<script>
$(document).ready(function() {
    var lineData = {
        labels: ["January", "February", "March", "April", "May", "June", "July", "AUG", "SEP", "OCT", "NOV", "DEC"],
        datasets: [
            {
                label: "Sale",
                backgroundColor: "rgba(26,179,148,0.5)",
                borderColor: "rgba(26,179,148,0.7)",
                pointBackgroundColor: "rgba(26,179,148,1)",
                pointBorderColor: "#fff",
                // 直接引用PHP变量转成的JSON数组
                data: <?php echo json_encode($salesData); ?>
            },
        ]
    };

    var lineOptions = { responsive: true };
    var ctx = document.getElementById("lineChart").getContext("2d");
    new Chart(ctx, {type: 'line', data: lineData, options:lineOptions});
});
</script>