Chart.js双Y轴零值对齐配置方法咨询

问题描述 #

使用Chart.js对比两组数值差异较大的数据集，采用双Y轴绘制图表：

• 一组数据集包含负值，图表基线始于负值
• 另一组仅含正值，基线始于0
  需要实现双Y轴的零值对齐，当前坐标轴配置代码如下：

y: {
    beginAtZero: true,
    grid:  {
        display: false,
        drawBorder: false,
        drawOnChartArea: false,
     },
     ticks: {
        display: true,
     },
   },
},
y1: {
     beginAtZero: true,
     position: 'right',
     grid: {
        display: false,
        drawBorder: false,
        drawOnChartArea: false,
     },
     ticks: {
        display: true,
     },
   },
}

示例图表效果：

解决方案 #

Chart.js没有直接的零值对齐配置项，但可以通过手动计算坐标轴极值比例实现对齐，核心是让两个Y轴的正负区间比例一致，确保零点在同一水平线。

具体操作步骤：

1. 统计两组数据集的极值：
   • 左Y轴（含负值）：获取最小值minLeft（负数）、最大值maxLeft
   • 右Y轴（全正值）：获取最大值maxRight，最小值默认为0
2. 计算左Y轴的正负区间比例：ratio = maxLeft / Math.abs(minLeft)
3. 反推右Y轴的虚拟最小值（用于对齐零点）：minRight = -maxRight / ratio
4. 修改坐标轴配置，移除beginAtZero，手动设置min和max：

修改后的配置示例：

// 假设已提前计算好 minLeft、maxLeft、maxRight、minRight
y: {
    min: minLeft,
    max: maxLeft,
    grid:  {
        display: false,
        drawBorder: false,
        drawOnChartArea: false,
     },
     ticks: {
        display: true,
     },
   },
},
y1: {
     min: minRight,
     max: maxRight,
     position: 'right',
     grid: {
        display: false,
        drawBorder: false,
        drawOnChartArea: false,
     },
     ticks: {
        display: true,
        // 可选：隐藏右Y轴的负刻度，适配原无负值的数据集
        callback: function(value) {
            return value >= 0 ? value : '';
        }
     },
   },
}

如果使用Chart.js v3+版本，还可以通过afterBuildTicks钩子动态计算极值，无需手动统计数据：

options: {
    scales: {
        y: {
            // 左Y轴基础配置
            afterBuildTicks: function(axis) {
                // 获取关联数据集的极值，计算比例
                const dataset = axis.chart.data.datasets[0];
                const values = dataset.data;
                const minLeft = Math.min(...values);
                const maxLeft = Math.max(...values);
                const ratio = maxLeft / Math.abs(minLeft);
                
                // 同步更新右Y轴的min和max
                const y1Axis = axis.chart.scales.y1;
                const y1Dataset = axis.chart.data.datasets[1];
                const maxRight = Math.max(...y1Dataset.data);
                y1Axis.options.min = -maxRight / ratio;
                y1Axis.options.max = maxRight;
                y1Axis.update();
            },
            grid:  {
                display: false,
                drawBorder: false,
                drawOnChartArea: false,
            },
            ticks: {
                display: true,
            },
        },
        y1: {
            position: 'right',
            grid: {
                display: false,
                drawBorder: false,
                drawOnChartArea: false,
            },
            ticks: {
                display: true,
                callback: function(value) {
                    return value >= 0 ? value : '';
                }
            },
        }
    }
}

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