如何在Chart.js中展示两个非同步数据集

你需要实现不同步时间序列在同一折线图展示的需求，当前代码出现X轴未渲染、X值显示undefined的问题，核心原因是未配置Chart.js的时间类型X轴及对应适配器，以下是修复方案：

1. 引入时间适配器 #

Chart.js本身不处理时间解析，需依赖第三方适配器库，以date-fns为例：

• 若使用npm安装：

npm install chartjs-adapter-date-fns date-fns

• 若使用CDN引入：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

2. 修改Chart配置代码 #

在options中明确指定X轴为时间类型，同时配置时间显示规则：

function drawChart() {
    const ctx = document.getElementById('chart1');
    chartObjects.push(new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: 'value 0',
                data: sensorModulesDict[sensorIDs[0]].map(item => ({ x: item.time, y: item.co2 })),
                borderColor: '#81D929',
                fill: false
            },
            {
                label: 'value 1',
                data: sensorModulesDict[sensorIDs[1]].map(item => ({ x: item.time, y: item.co2 })),
                borderColor: '#E67417',
                fill: false
            }]
        },
        options: {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'minute', // 根据你的数据粒度调整（second/hour/day等）
                        displayFormats: {
                            minute: 'HH:mm' // 自定义时间显示格式
                        }
                    },
                    title: {
                        display: true,
                        text: '时间'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'CO2数值'
                    }
                }
            },
            interaction: {
                mode: 'index',
                intersect: false
            }
        }
    }));
}

3. 关键说明 #

• 配置type: 'time'后，Chart.js会自动将两个数据集的时间点按顺序排列到X轴上，每个数据点对应正确的时间位置，完全符合你想要的目标图效果。
• 确保item.time是合法的时间格式（如ISO字符串、Date对象），若为自定义格式，可在time.parser中添加自定义解析函数适配。

内容的提问来源于stack exchange，提问作者Vojta Degeš