添加多数据集后Line Chart数据显示不全问题求助

DevOps 小满

2026-6-18

问题

使用Chart.js开发折线图时，仅更新温度数据时图表显示正常；但在temperatureChart中添加湿度数据集后，图表仅填充一半（如图所示）。

图表显示异常

以下是相关代码：

// Declare chart variables
let temperatureChart;
let humidityChart;

// Function to create the temperature and humidity charts
function createCharts() {
    const ctxTemp = document.getElementById('temperatureChart').getContext('2d');
    const ctxHum = document.getElementById('humidityChart').getContext('2d');

    // Create the temperature chart
    temperatureChart = new Chart(ctxTemp, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Temperature (°C)',
                data: [],
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2,
                fill: false,
                tension: 0.4  // Smooth the line
            },{
                label: 'Humidity (%)',
                data: [],
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2,
                fill: false,
                tension: 0.4  // Smooth the line
        }]
        },
        options: {
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Time'
                    }
                },
                y: {
                    min: 0,  // Minimum value for temperature
                    max: 60, // Maximum value for temperature
                    title: {
                        display: true,
                        text: 'Temperature (°C)'
                    }
                }
            },
            animation: {
                duration: 0  // Disable animation to make it feel more real-time
            }
        }
    });

    // Create the humidity chart
    humidityChart = new Chart(ctxHum, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Humidity (%)',
                data: [],
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2,
                fill: false,
                tension: 0.4  // Smooth the line
            }]
        },
        options: {
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Time'
                    }
                },
                y: {
                    min: 0,   // Minimum value for humidity
                    max: 100, // Maximum value for humidity
                    title: {
                        display: true,
                        text: 'Humidity (%)'
                    }
                }
            },
            animation: {
                duration: 0  // Disable animation to make it feel more real-time
            }
        }
    });
}

// Function to update the charts with new data
function updateCharts(data) {
    const currentTime = new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit', second: '2-digit'});  // Get current time as "hh:mm:ss AM/PM"
    
    // Update the display box with the latest data
    document.getElementById('temperature').textContent = `${data.temperature}°C`;
    document.getElementById('humidity').textContent = `${data.humidity}%`;

    // Add the new data points to the charts
    temperatureChart.data.labels.push(currentTime);
    temperatureChart.data.datasets[0].data.push(data.temperature);
    humidityChart.data.labels.push(currentTime);
    humidityChart.data.datasets[0].data.push(data.humidity);

    // Update the charts
    temperatureChart.update();
    humidityChart.update();
}

window.onload = function() {
    createCharts();
    setInterval(fetchData, 1000);
}

修复方案

问题根源

湿度数据未同步更新：updateCharts函数仅给temperatureChart的温度数据集添加数据，未同步更新湿度数据集，导致两个数据集长度不匹配，Chart.js渲染异常。
Y轴配置冲突：temperatureChart的Y轴固定了0-60的范围，湿度值（通常0-100）会被截断；同时Y轴标题仅标注温度，不符合双数据集的展示需求。
数据集颜色重复：两个数据集使用相同的边框颜色，无法区分温度和湿度曲线。

具体修复步骤

同步更新temperatureChart的湿度数据集，保证每个时间点对应两组数据。
移除Y轴固定范围，让Chart.js自动适配双数据集的数值范围；修改Y轴标题为通用表述，或配置双Y轴实现独立范围。
给两个数据集设置不同的边框颜色，方便区分曲线。

修改后的完整代码

// Declare chart variables
let temperatureChart;
let humidityChart;

// Function to create the temperature and humidity charts
function createCharts() {
    const ctxTemp = document.getElementById('temperatureChart').getContext('2d');
    const ctxHum = document.getElementById('humidityChart').getContext('2d');

    // Create the temperature chart
    temperatureChart = new Chart(ctxTemp, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Temperature (°C)',
                data: [],
                borderColor: 'rgba(255, 99, 132, 1)', // 温度曲线用红色
                borderWidth: 2,
                fill: false,
                tension: 0.4
            },{
                label: 'Humidity (%)',
                data: [],
                borderColor: 'rgba(54, 162, 235, 1)', // 湿度曲线用蓝色
                borderWidth: 2,
                fill: false,
                tension: 0.4
        }]
        },
        options: {
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Time'
                    }
                },
                y: {
                    // 移除固定范围，自动适配双数据集数值
                    title: {
                        display: true,
                        text: 'Value' // 通用标题，适配双数据类型
                    }
                }
            },
            animation: {
                duration: 0
            }
        }
    });

    // Create the humidity chart
    humidityChart = new Chart(ctxHum, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Humidity (%)',
                data: [],
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2,
                fill: false,
                tension: 0.4
            }]
        },
        options: {
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Time'
                    }
                },
                y: {
                    min: 0,
                    max: 100,
                    title: {
                        display: true,
                        text: 'Humidity (%)'
                    }
                }
            },
            animation: {
                duration: 0
            }
        }
    });
}

// Function to update the charts with new data
function updateCharts(data) {
    const currentTime = new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit', second: '2-digit'});
    
    // Update display box
    document.getElementById('temperature').textContent = `${data.temperature}°C`;
    document.getElementById('humidity').textContent = `${data.humidity}%`;

    // Add new data points
    temperatureChart.data.labels.push(currentTime);
    temperatureChart.data.datasets[0].data.push(data.temperature);
    // 新增：同步更新temperatureChart的湿度数据集
    temperatureChart.data.datasets[1].data.push(data.humidity);
    
    humidityChart.data.labels.push(currentTime);
    humidityChart.data.datasets[0].data.push(data.humidity);

    // Update charts
    temperatureChart.update();
    humidityChart.update();
}

window.onload = function() {
    createCharts();
    setInterval(fetchData, 1000);
}

可选优化：双Y轴配置

如果需要让温度和湿度使用独立的Y轴范围（温度0-60，湿度0-100），可以修改temperatureChart的scales配置：

scales: {
    x: {
        title: {
            display: true,
            text: 'Time'
        }
    },
    y: {
        title: {
            display: true,
            text: 'Temperature (°C)'
        },
        min: 0,
        max: 60,
        position: 'left'
    },
    y1: {
        title: {
            display: true,
            text: 'Humidity (%)'
        },
        min: 0,
        max: 100,
        position: 'right',
        grid: {
            drawOnChartArea: false // 避免覆盖主Y轴网格
        }
    }
}

同时给湿度数据集指定使用右侧Y轴：

{
    label: 'Humidity (%)',
    data: [],
    borderColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 2,
    fill: false,
    tension: 0.4,
    yAxisID: 'y1' // 指定使用右侧Y轴
}

内容的提问来源于stack exchange，提问作者MAQUIRANG MICHAELA KIM G

添加多数据集后Line Chart数据显示不全问题求助

问题 #

修复方案 #

问题根源 #

具体修复步骤 #

修改后的完整代码 #

可选优化：双Y轴配置 #

问题

修复方案

问题根源

具体修复步骤

修改后的完整代码

可选优化：双Y轴配置