如何实现Chart.js实时显示数据？Web开发新手技术求助

现有代码问题分析 #

• 每次获取数据都会重新创建Chart实例，既浪费资源又会导致图表重复渲染
• temp是数组，但直接用z - temp做数值计算会出错，应该取数组内最新的温度值
• 缺少定时拉取数据的逻辑，无法实现实时更新

修正后的完整代码 #

// 全局存储Chart实例和温度数据
let myPieChart = null;
const tempData = [];

// 初始化图表（仅执行一次）
function initChart() {
    const ctx = document.getElementById("myPieChart");
    myPieChart = new Chart(ctx, {
        type: "doughnut",
        data: {
            labels: ["Temperature", "Null"],
            datasets: [{
                data: [0, 80], // 初始默认值
                backgroundColor: [
                    "orange",
                    "rgba(0, 172, 105, 1)"
                ],
            }]
        },
        options: {
            legend: {
                display: false
            },
        }
    });
}

// 更新图表数据
function updateChart(temperature) {
    tempData.push(temperature);
    // 取最新的温度值计算
    const latestTemp = tempData[tempData.length - 1];
    const remaining = 80 - latestTemp;
    // 更新图表数据集并触发重绘
    myPieChart.data.datasets[0].data = [latestTemp, remaining];
    myPieChart.update();
}

// 从接口获取最新数据
async function fetchTemperatureData() {
    try {
        const response = await fetch('http://localhost:1111/chartpie');
        const data = await response.json();
        // 从返回的数组中取最新温度值（根据接口实际结构调整）
        const latestTemperature = data.length > 0 ? data[data.length - 1].temperature : 0;
        updateChart(latestTemperature);
    } catch (error) {
        console.error('数据获取失败:', error);
    }
}

// 启动流程：初始化图表 + 定时拉取数据
initChart();
// 每3秒拉取一次数据，可根据需求调整间隔（单位：毫秒）
setInterval(fetchTemperatureData, 3000);

核心优化说明 #

• 初始化与更新分离: 只创建一次Chart实例，后续通过update()方法更新数据，避免重复渲染
• 数组数据正确处理: 从返回的数组中提取最新温度值参与计算，避免数组直接运算的错误
• 定时拉取逻辑: 使用setInterval定期调用接口获取最新数据，实现实时更新
• 异常处理: 添加try-catch捕获请求异常，防止程序崩溃

内容的提问来源于stack exchange，提问作者thawat