Chart.js双Y轴绘制两个数据集与X轴标签精确控制

本文深入讲解在 Chart.js 中正确配置双 Y 轴图表的完整方法，重点攻克 X 轴标签错位、刻度不匹配以及数据对齐等常见难题。通过标准化数据结构与显式声明坐标轴类型，帮助开发者打造清晰、可维护的双轴可视化方案。

在 Chart.js 中构建双 Y 轴图表时，许多开发者最初都会遇到一个典型问题——直接使用 {x: value, y: value} 这类对象数组作为数据传入，结果导致 X 轴标签要么出现错位，要么干脆无法正常显示。这一问题的根源在于 Chart.js 的自动推断机制：它默认将数据当作时间轴或类别轴进行处理，当两组数据的 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 可能会将数值当作字符串处理，导致刻度按文本排序，进而出现标签重复、顺序错乱等问题。

以下是经过优化的完整实现代码，关键注释已清晰标注：

核心注意事项：

• 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 轴标签严格按照数值线性分布，两组数据各自独立缩放、互不干扰，真正实现多维度数据的清晰对比与深度分析。