本文详解如何在 chart.js 中正确配置双 y 轴图表，重点解决 x 轴标签错位、刻度不匹配及数据对齐问题，通过标准化数据结构与显式声明坐标轴类型实现清晰、可维护的双轴可视化。
本文详解如何在 chart.js 中正确配置双 y 轴图表，重点解决 x 轴标签错位、刻度不匹配及数据对齐问题，通过标准化数据结构与显式声明坐标轴类型实现清晰、可维护的双轴可视化。
在 Chart.js 中绘制双 Y 轴图表（如左侧蓝色曲线 + 右侧绿色曲线）时，一个常见误区是直接使用 {x: value, y: value} 对象数组作为 data，这会导致 Chart.js 默认启用时间轴（time）或类别轴（category）自动推断逻辑，从而忽略自定义 X 轴刻度、造成标签缺失或错位——尤其当两组数据的 X 值不完全对齐时（如 Data1 在 0.05, 0.15, ...，而 Data2 在 0.0, 0.2, ...）。
✅ 正确做法是：统一采用 labels + data[] 数组形式，并确保两组数据长度一致、索引对齐。Chart.js 的双轴图表要求所有数据集共享同一套 X 轴标签（即横坐标基准），因此需预先定义完整且有序的 X 标签序列（例如 ['0.0', '0.05', '0.1', ..., '0.6']），再将原始数据按对应位置填入数组，缺失值用 null 或 0 占位（推荐 null 以避免虚假零点干扰视觉判断）。
此外，必须显式声明 scales.x.type = 'linear' ——否则 Chart.js 可能将数值型 X 坐标误判为字符串标签（category 模式），导致刻度无法按数值比例缩放、标签重复或顺序混乱。
以下是优化后的完整实现（含关键注释）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js 双 Y 轴图表</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="chart" width="1920" height="1080"></canvas>
<script>
const ctx = document.getElementById('chart').getContext('2d');
// ✅ 步骤1：定义统一、有序的X轴标签（数值字符串，确保排序正确）
const labels = ['0.0', '0.05', '0.1', '0.15', '0.2', '0.25', '0.3', '0.35', '0.4', '0.45', '0.5', '0.55', '0.6'];
// ✅ 步骤2：按labels索引对齐填充数据 —— 缺失点设为 null（更语义化，不参与渲染）
const data1 = [null, 12, null, 19, null, 3, null, 5, null, 2, null, 3, null]; // Data1 原始点：0.05→12, 0.15→19...
const data2 = [20, null, null, null, 1, null, 15, null, 2, null, 31, null, 11]; // Data2 原始点：0.0→20, 0.2→1...
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
yAxisID: 'yA',
label: 'Data1',
data: data1,
borderColor: 'blue',
backgroundColor: 'rgba(0, 102, 255, 0.1)',
tension: 0.3,
fill: false
},
{
yAxisID: 'yB',
label: 'Data2',
data: data2,
borderColor: 'green',
backgroundColor: 'rgba(0, 180, 0, 0.1)',
tension: 0.3,
fill: false
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
// ✅ 左Y轴（Data1）
yA: {
type: 'linear',
position: 'left',
title: { display: true, text: 'Data1 值', color: 'blue' },
ticks: { beginAtZero: true, color: 'blue' },
grid: { color: 'rgba(0, 102, 255, 0.2)' }
},
// ✅ 右Y轴（Data2）—— 注意：position 必须设为 'right'
yB: {
type: 'linear',
position: 'right',
title: { display: true, text: 'Data2 值', color: 'green' },
ticks: { beginAtZero: true, color: 'green' },
grid: { drawOnChartArea: false } // 避免与左轴网格重叠
},
// ✅ 关键！X轴必须显式声明为 linear 类型，支持数值刻度
x: {
type: 'linear',
title: { display: true, text: 'X 坐标' },
ticks: {
precision: 2, // 限制小数位数，避免显示 0.05000000000000001
callback: (value) => parseFloat(value).toFixed(2) // 格式化显示
}
}
},
plugins: {
legend: { position: 'top' },
tooltip: {
mode: 'index',
intersect: false
}
}
}
});
</script>
</body>
</html>? 关键注意事项：
- yAxisID 必须与 scales 中定义的 ID 完全一致（如 'yA' / 'yB'），且每个 yAxisID 仅被一个数据集引用；
- 双 Y 轴应分置左右两侧：position: 'left' 和 position: 'right'，否则会重叠；
- 使用 null 替代 0 填充缺失值，可防止图表错误连接非真实数据点；
- 若需更高精度控制 X 轴（如自定义步长、范围），可在 scales.x 中添加 min、max、stepSize 等属性；
- Chart.js v4+ 推荐使用 plugins.tooltip.mode: 'index' 实现跨数据集联动提示，提升交互体验。
通过以上结构化配置，您将获得一个专业、准确、易于扩展的双 Y 轴图表，X 轴标签严格按数值线性分布，两组数据独立缩放、互不干扰，真正实现多维度数据的清晰对比分析。
