Chart.js 4.4 问题：无法在单一图表中绘制两个时间序列

使用Chart.js在单个图表中绘制两条折线时，实际生成了两个各含一条折线的图表，而非一个包含两条折线的图表。当两个时间序列的时间戳对齐（间隔一致）时功能正常，但两者时间戳间隔不同时就出现问题。

<html>
<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

new Chart("myChart", {
    type: 'line',
    data: {
        datasets: [{
            data: [{x:'2021-11-06 23:39:30',y:1900},{x:'2022-11-07 01:00:28',y:2000},{x:'2023-11-08 09:00:28',y:1800}],
            borderColor: "red",
            label:"John",
            fill: false
        },{
            data: [{x:'2021-11-06 21:39:30',y:1800},{x:'2022-11-07 00:10:28',y:1650},{x:'2023-11-08 12:00:28',y:1900}],
            borderColor: "blue",
            label:"Laura",
            fill: false         
        }],
    },

    options: {
        scales: {
            x: {    
            },
            y: {
                min: 1000,      
                max: 2400, 
            }
        }
    }   
});
</script>
</html>

当前效果 #

期望效果 #

问题核心是X轴未指定为时间类型，Chart.js默认会把非数值/时间的X轴数据当作离散类别处理，当两个数据集的X轴标签不完全重合时，就会在同一个画布上生成独立的类别轴，看起来像是两个图表。

只需两步修改即可解决：

1. 引入Chart.js时间适配器（Chart.js v3+版本必须单独引入，否则时间轴无法正常解析）：

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

2. 在X轴配置中指定类型为time，可根据需求配置时间单位和显示格式：

options: {
    scales: {
        x: {    
            type: 'time', // 标记X轴为时间类型
            time: {
                unit: 'day', // 根据数据粒度选择时间单位，如hour/minute等
                tooltipFormat: 'yyyy-MM-dd HH:mm:ss' // 鼠标悬浮时显示的时间格式
            }
        },
        y: {
            min: 1000,      
            max: 2400, 
        }
    }
}

修改后的完整代码：

<html>
<div>
  <canvas id="myChart"></canvas>
</div>

<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>

<script>
new Chart("myChart", {
    type: 'line',
    data: {
        datasets: [{
            data: [{x:'2021-11-06 23:39:30',y:1900},{x:'2022-11-07 01:00:28',y:2000},{x:'2023-11-08 09:00:28',y:1800}],
            borderColor: "red",
            label:"John",
            fill: false
        },{
            data: [{x:'2021-11-06 21:39:30',y:1800},{x:'2022-11-07 00:10:28',y:1650},{x:'2023-11-08 12:00:28',y:1900}],
            borderColor: "blue",
            label:"Laura",
            fill: false         
        }],
    },
    options: {
        scales: {
            x: {    
                type: 'time',
                time: {
                    unit: 'day',
                    tooltipFormat: 'yyyy-MM-dd HH:mm:ss'
                }
            },
            y: {
                min: 1000,      
                max: 2400, 
            }
        }
    }   
});
</script>
</html>

修改后Chart.js会正确解析时间序列数据，将两条折线绘制在同一个时间轴上，即使两个数据集的时间戳间隔不同也能正常显示。

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