Chart.js 4绘制12导联ECG图表的Y轴刻度适配问题求助

要解决Chart.js中Y轴因大振幅数据自动缩放导致的刻度混乱问题，核心是强制Y轴遵循ECG标准的固定比例，禁用自动缩放。以下是具体实现步骤与代码示例：

核心配置思路 #

根据你的ECG标准（Y轴10mm/mV，每小格0.1mV）和固定canvas尺寸（500px高），我们可以：

• 固定Y轴的范围（比如±2.5mV），刚好对应50mm高度（500px，按10px=1mm的比例）
• 强制Y轴刻度步长为0.1mV，与标准小格对应
• 关闭Chart.js的响应式自动调整，保持canvas固定尺寸

完整Chart.js配置示例 #

// 假设从PHP/Livewire获取的时间数组（单位：ms）和12导联数据（单位：mV）
const timeLabels = [0, 40, 80, ..., 24000]; // 对应24秒时长，6000px宽符合25mm/s标准
const leadIData = [0.1, 0.2, 0.3, ...];
// 其他11个导联数据...

const ecgChart = new Chart(document.getElementById('ecgCanvas'), {
    type: 'line',
    data: {
        labels: timeLabels,
        datasets: [
            {
                label: '导联I',
                data: leadIData,
                borderColor: '#000',
                borderWidth: 1,
                fill: false,
                tension: 0, // 关闭波形平滑，符合ECG原始形态
                pointRadius: 0 // 隐藏数据点，避免干扰波形
            },
            // 依次添加其他11个导联的数据集，配置同上
        ]
    },
    options: {
        responsive: false, // 禁用响应式，保持canvas固定宽高
        maintainAspectRatio: false,
        scales: {
            x: {
                type: 'linear',
                min: 0,
                max: 24000, // 对应24秒，6000px宽符合25mm/s（每小格40ms）
                ticks: {
                    stepSize: 40,
                    callback: (value) => `${value}ms`
                },
                grid: {
                    drawOnChartArea: true,
                    // 区分大格（200ms）和小格（40ms）
                    color: (ctx) => ctx.tick.value % 200 === 0 ? '#999' : '#eee',
                    lineWidth: (ctx) => ctx.tick.value % 200 === 0 ? 1.5 : 0.5,
                    tickLength: 5
                }
            },
            y: {
                min: -2.5,
                max: 2.5, // 固定±2.5mV范围，对应500px高（10mm/mV）
                beginAtZero: false,
                ticks: {
                    stepSize: 0.1, // 每小格0.1mV，符合ECG标准
                    callback: (value) => `${value}mV`
                },
                grid: {
                    drawOnChartArea: true,
                    // 区分大格（0.5mV）和小格（0.1mV）
                    color: (ctx) => ctx.tick.value % 0.5 === 0 ? '#999' : '#eee',
                    lineWidth: (ctx) => ctx.tick.value % 0.5 === 0 ? 1.5 : 0.5,
                    tickLength: 5
                }
            }
        },
        plugins: {
            legend: { display: false } // 隐藏图例，导联可单独标注在图表外
        }
    }
});

关键注意事项 #

1. 数据单位一致性：确保从Livewire传递的ECG数据是原始mV值，不要提前做缩放处理，Chart.js会根据Y轴固定范围自动映射到canvas像素。
2. 振幅截断处理：如果某导联数据超过±2.5mV，波形会被截断。若需要容纳更大振幅，可调整Y轴范围为±3mV，但需同步调整canvas高度为600px（保持10mm/mV的比例），否则会破坏标准刻度比例。
3. X轴同步配置：X轴固定范围和步长确保符合25mm/s（每小格40ms）的标准，避免时间轴缩放。
4. 波形优化：设置tension: 0和pointRadius: 0让波形更接近真实ECG形态，避免平滑和数据点干扰。

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