如何让Chart.js单个数据集忽略整体坐标轴刻度解决极小值条形展示问题

云原生阿岚

2026-10-4

多条形图跨量级数据显示异常解决方案

完全可以实现，最通用的方案是为量级差异过大的数据集配置独立Y轴，互不干扰刻度计算规则，具体实现如下：

核心配置思路

将低数值的# Negócios Fechados数据集绑定到单独的Y轴，另外两个高数值数据集共用主Y轴，两个轴独立计算刻度范围。

代码示例

数据集修改

const datasets = [
    {
        "label": "# Negócios Fechados",
        "data": [ 8, 5, 3, 12 ],
        "backgroundColor": "rgba(255, 99, 132, 1)",
        // 绑定到独立副Y轴
        "yAxisID": "y-secondary"
    },
    {
        "label": "# Valor Total",
        "data": [ 16000, 25000,4500, 36000 ],
        "backgroundColor": "rgba(54, 162, 235, 1)",
        // 绑定到主Y轴
        "yAxisID": "y-primary"
    },
    {
        "label": "# Ticket Médio",
        "data": [ 2000, 5000, 1500, 3000 ],
        "backgroundColor": "rgba(255, 206, 86, 1)",
        // 绑定到主Y轴
        "yAxisID": "y-primary"
    }
]

坐标轴配置

const chartOptions = {
    scales: {
        // 左侧主Y轴，适配高数值数据
        "y-primary": {
            type: "linear",
            display: true,
            position: "left"
        },
        // 右侧副Y轴，适配低数值成交数数据
        "y-secondary": {
            type: "linear",
            display: true,
            position: "right",
            // 关闭副Y轴网格线，避免和主Y轴网格重叠混乱
            grid: {
                drawOnChartArea: false
            }
        }
    }
}