如何将PHP数组中的指定标签与值导入ChartJS环形图

算力阿峰

2026-9-30

实现步骤

你只需要先把PHP侧的数组转换为JavaScript可读取的格式，再替换Chart配置中的对应字段即可，具体实现代码如下：

1. 转换PHP数组为JS可用格式

在页面的PHP代码段中，先将$dataPoints数组转为JSON格式输出到JS上下文，这里加JSON_HEX_TAG参数是为了避免XSS安全问题：

<script>
// 从PHP数组生成JS可用的数据源
const signalData = <?php echo json_encode($dataPoints, JSON_HEX_TAG); ?>;
// 拆分出标签数组和数值数组
const chartLabels = signalData.map(item => item.label.trim());
const chartValues = signalData.map(item => Number(item.value));
</script>

2. 替换Chart初始化代码中的硬编码内容

把你原有Chart脚本里的labels、data和标题字段替换为上面的变量即可，完整修改后的代码如下：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById("MyChart"), {
    type: 'doughnut',
    data: {
        labels: chartLabels,
        datasets: [
            {
                backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                data: chartValues
            }
        ]
    },
    options: {
        title: {
            display: true,
            text: '信号质量分布统计'
        }
    }
});
</script>