如何用Chart.js绘制各折线含独立X坐标的多折线图？

1. Chart.js 其实可以满足需求 #

你可能没留意到，Chart.js的scatter图表类型搭配showLine: true配置，完全支持每条折线使用独立的X/Y数据对。示例配置如下：

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [
            {
                label: 'Line 1',
                data: [{x: 1.1, y: 100}, {x: 2.1, y: 200}],
                showLine: true,
                borderColor: 'red'
            },
            {
                label: 'Line 2',
                data: [{x: 1.2, y: 110}, {x: 2.2, y: 210}],
                showLine: true,
                borderColor: 'blue'
            }
        ]
    },
    options: {
        scales: {
            x: {type: 'linear', position: 'bottom'},
            y: {type: 'linear'}
        }
    }
});

这种方式下，每条折线的X坐标完全独立，不需要共享同一X轴刻度列表。

2. Plotly 是非常合适的选择 #

Plotly对独立X坐标的多折线支持非常友好，配置简单且自带丰富交互功能（缩放、hover提示、图例切换等）。示例代码：

const data = [
    {
        x: [1.1, 2.1],
        y: [100, 200],
        type: 'scatter',
        mode: 'lines+markers',
        name: 'Line 1'
    },
    {
        x: [1.2, 2.2],
        y: [110, 210],
        type: 'scatter',
        mode: 'lines+markers',
        name: 'Line 2'
    }
];

Plotly.newPlot('plotly-container', data);

Plotly会自动适配不同折线的X轴范围，无需额外配置就能让所有折线在同一画布上正确渲染，完全匹配你的需求。

3. 其他可选库 #

• Highcharts：同样支持独立X坐标的折线图，配置逻辑类似Plotly，适合需要高度定制化样式的场景。
• ECharts：国内常用图表库，通过series数组中每个对象的data字段传入[[x1,y1], [x2,y2]]格式的独立数据对，开启折线模式即可实现需求。

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