Chart.js多轴折线图显示异常 数值正确但线条缩放比例错误

你为7条数据量级差异极大的折线分别分配了独立Y轴，但除左侧主Y轴外，其余6个附属Y轴均未配置明确的量程上限。Chart.js默认会对每个独立线性轴做单独自适应缩放：比如数值最高仅34的Feed折线对应y1轴，会自动将轴上限设为略高于34的数值，此时34在y1轴上的视觉位置会接近图表顶部，高度超过主Y轴（对应万级数据）上2万多数值的折线，最终造成视觉比例失真。

根据实际需求二选一即可：

方案1：无需观察小量级数据波动（最简单） #

直接删除所有非主折线数据集里的yAxisID配置，让所有折线默认绑定到左侧主Y轴，所有数据会按统一比例缩放。
注意：该方案下个位数、十位数量级的折线会几乎贴在图表0轴位置，无法看清波动。

方案2：保留多轴，视觉比例准确（适配你当前配置逻辑） #

你已经将y1~y6的轴刻度全部隐藏，核心需要保证所有Y轴0基线在同一水平位置，每个轴的量程上限匹配对应数据集的最大值，让数值占自身量程的比例和视觉高度占比完全对应，修改规则如下：

• 给左侧主Y轴设置suggestedMax，数值取对应Regular数据集最大值的1.1倍（留10%顶部余量，避免折线贴到图表顶边）
• 给每个附属Y轴（y1~y6）分别设置suggestedMax，数值取对应绑定数据集最大值的1.1倍
• 所有轴保留beginAtZero: true配置，保证0基线对齐

修改后的scales配置参考如下，你只需要把每个轴的suggestedMax替换成对应数据集实际最大值的1.1倍即可：

scales: {
    y: {
        type: 'linear',
        display: true,
        position: 'left',
        beginAtZero: true,
        suggestedMax: 33000 // 替换为Regular数据集最大值*1.1
    },
    y1: {
        type: 'linear',
        display: true,
        position: 'right',
        beginAtZero: true,
        suggestedMax: 38, // 替换为Feed数据集最大值*1.1
        grid: {drawOnChartArea: false},
        ticks: {
            display: false
        }
    },
    y2: {
        type: 'linear',
        display: true,
        position: 'right',
        beginAtZero: true,
        suggestedMax: 10, // 替换为Recents数据集最大值*1.1
        grid: {drawOnChartArea: false},
        ticks: {
            display: false
        }
    },
    y3: {
        type: 'linear',
        display: true,
        position: 'right',
        beginAtZero: true,
        suggestedMax: 10, // 替换为Search数据集最大值*1.1
        grid: {drawOnChartArea: false},
        ticks: { display: false }
    },
    y4: {
        type: 'linear',
        display: true,
        position: 'right',
        beginAtZero: true,
        suggestedMax: 10, // 替换为Popular数据集最大值*1.1
        grid: {drawOnChartArea: false},
        ticks: { display: false }
    },
    y5: {
        type: 'linear',
        display: true,
        position: 'right',
        beginAtZero: true,
        suggestedMax: 10, // 替换为Profile数据集最大值*1.1
        grid: {drawOnChartArea: false},
        ticks: { display: false }
    },
    y6: {
        type: 'linear',
        display: true,
        position: 'right',
        beginAtZero: true,
        suggestedMax: 10, // 替换为Recommended数据集最大值*1.1
        grid: {drawOnChartArea: false},
        ticks: { display: false }
    }
}

如果不想手动计算每个轴的suggestedMax，可以在初始化图表前遍历所有数据集自动计算对应轴的量程上限，后续数据更新也不需要手动修改配置，代码如下：

// 放在Chart实例初始化代码前执行
const axisMaxConfig = { y:0, y1:0, y2:0, y3:0, y4:0, y5:0, y6:0 }
// 遍历所有数据集计算每个轴的最大值
data.datasets.forEach(dataset => {
    const datasetMax = Math.max(...dataset.data)
    if(datasetMax > axisMaxConfig[dataset.yAxisID]) {
        axisMaxConfig[dataset.yAxisID] = datasetMax * 1.1 // 统一留10%顶部余量
    }
})
// 将计算出的上限自动注入scale配置
Object.keys(axisMaxConfig).forEach(axisId => {
    config.options.scales[axisId].suggestedMax = axisMaxConfig[axisId]
})

异常效果示例图

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