Chart.js 是否可实现附图所示双正数值上下排布Y轴效果？

这个需求完全可以通过Chart.js实现，不存在功能层面的限制。

核心实现逻辑 #

Chart.js 的scales配置体系支持自定义任意数量的独立纵轴，大家默认熟悉的左右分置多纵轴效果只是内置快捷配置，通过基础参数调整完全可以实现上下分置的排布效果；且每个纵轴都可独立配置正数值的刻度范围，根本不需要引入负向值域做反向换算。

关键配置步骤 #

• 定义独立纵轴：在scales配置块中为两个纵轴分配独立的标识ID，均设置为线性数值轴（type: 'linear'），分别根据对应数据集的正数值范围自定义min/max、步长等刻度参数，默认状态下就可以正常展示从0开始的正数值标签。
• 调整轴排布位置：两个纵轴均设置为左侧对齐（position: 'left'），通过调整刻度内边距、轴网格的展示范围，将第一个轴的刻度限制在绘图区上半侧，第二个轴的刻度限制在绘图区下半侧，就能直接实现上下分置的视觉效果。
• 绑定数据匹配关系：每个数据系列通过yAxisID属性指定关联的纵轴标识，即可实现不同数据值按照对应纵轴的刻度做位置映射。

优化注意点 #

• 为避免两个纵轴的网格线互相重叠，可给其中一个轴设置grid.drawOnChartArea: false，仅保留轴刻度、轴标题的展示，不遮挡另一轴对应的可视化内容。
• 两个纵轴的高度占比可通过调整绘图区边距、轴标签的位置参数灵活控制，完全匹配目标设计的排布比例。

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