如何结合SQL数据实现Chart.js饼图点击按钮自动更新

实现方案 #

你没法直接在前端JS中调用PHP函数，因为PHP是服务端运行的代码，前端触发更新需要走AJAX请求拉取最新数据再更新Chart实例，完整实现步骤如下：

步骤1：新建独立的PHP数据接口 #

新建get_pie_chart_data.php文件，封装数据查询逻辑，返回JSON格式数据：

<?php
// 引入你原有封装了pieChartUpdater函数的公共文件
include 'your_common_function_file.php';

// 接收请求参数（对应你原有逻辑的$FirstItemDD[0]，根据实际场景传值）
$param = $_GET['first_item_dd'] ?? '';
// 调用原有查询逻辑获取最新数据
$OverviewResult = pieChartUpdater($param);

// 返回JSON格式结果
header('Content-Type: application/json');
echo json_encode($OverviewResult);
?>

步骤2：修改现有JS逻辑 #

调整原有初始化逻辑，避免重复初始化问题，同时新增图表更新方法：

var Passed           = "198";
var Failed           = "37";
var Notrun           = "0";
var Err              = "0";
var Na               = "0";
var PercentagePassed = "84.26";
var PercentageFailed = "15.74";
var PercentageNotrun = "0";
var PercentageError  = "0";
var PercentageNa     = "0";
// 全局保存Chart实例，方便后续更新调用
let myPieChart = null;

window.chartColors = {
    red: '#dc3545',
    green: '#1cc88a',
    blue: '#4e73df',
    yellow: '#f6c23e',
    black: '#5a5c69'
};

/**
 * 初始化饼图
 */
function initPieChart(pass, fail, notRun, err, nA, percentagePassed, percentageFailed, percentageNotRun, percentageError, percentageNA) {
    const config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    Number(nA),
                    Number(err),
                    Number(notRun),
                    Number(fail),
                    Number(pass)
                ],
                backgroundColor: [
                    window.chartColors.black,
                    window.chartColors.yellow,
                    window.chartColors.blue,
                    window.chartColors.red,
                    window.chartColors.green,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                percentageNA + "% NA",
                percentageError + "% Error",
                percentageNotRun + "% Not Run",
                percentageFailed + "% Failed",
                percentagePassed + "% Passed"
            ]
        },
        options: {
            responsive: true
        }
    };
    const ctx = document.getElementById('chart-area').getContext('2d');
    myPieChart = new Chart(ctx, config);
}

/**
 * 更新饼图数据
 */
function updatePieChart(newData) {
    // newData对应接口返回的$OverviewResult数组
    myPieChart.data.datasets[0].data = [
        Number(newData[4]),
        Number(newData[3]),
        Number(newData[2]),
        Number(newData[1]),
        Number(newData[0])
    ];
    myPieChart.data.labels = [
        newData[9] + "% NA",
        newData[8] + "% Error",
        newData[7] + "% Not Run",
        newData[6] + "% Failed",
        newData[5] + "% Passed"
    ];
    // 触发ChartJS自带的更新动画
    myPieChart.update();
}

// 页面加载完成后初始化图表
window.onload = function() {
    initPieChart(Passed, Failed, Notrun, Err, Na, PercentagePassed, PercentageFailed, PercentageNotrun, PercentageError, PercentageNa);
}

步骤3：新增更新按钮和点击事件 #

首先在HTML中添加触发更新的按钮：

<!-- 放在canvas容器附近即可，样式可自行调整 -->
<button id="updateChartBtn" style="margin: 10px 0;">更新饼图数据</button>

添加按钮点击事件，发起AJAX请求拉取新数据并更新图表：

document.getElementById('updateChartBtn').addEventListener('click', function() {
    // 替换first_item_dd参数值为你实际业务需要的$FirstItemDD[0]对应值
    fetch('get_pie_chart_data.php?first_item_dd=你的业务参数')
        .then(res => res.json())
        .then(data => {
            updatePieChart(data);
        })
        .catch(err => console.error('数据请求失败：', err));
});

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup