Chart.js柱状图隐藏零值占位空间并将非零柱子居中的实现方法

解决方案 #

实现步骤 #

• 把数据集里所有的0值替换为null，Chart.js会自动跳过null值的占位渲染，不会占用柱状空间
• 在图表配置的options中添加柱状图专属配置，开启跳过空值、柱状条在分类区域居中的参数

修改后完整代码 #

var chartDebugData = {
    labels: ["2021-11-16", "2021-11-17", "2021-11-18"],
    datasets: [
        {
            label: "Data1",
            backgroundColor: "rgba(161, 198, 76, 0.5)",
            borderColor: "rgba(161, 198, 76)",
            data: [
                66,
                77,
                null, // 原0值替换为null
            ],
            borderWidth: 2,
        },
        {
            label: "Data2",
            backgroundColor: "rgba(107, 228, 46, 0.5)",
            borderColor: "rgba(107, 228, 46)",
            data: [
                55,
                null, // 原0值替换为null
                82,
            ],
            borderWidth: 2,
        },
    ]
}

const canvasEl = document.getElementById("charts");

// Draw graph
new Chart(canvasEl, {
    type: 'bar',
    data: chartDebugData,
    options: {
        barValueSpacing: 5,
        plugins: {
            legend: {
                position: 'top',
            }
        },
        scales: {
            x: {
                stacked: false,
            },
            y: {
                beginAtZero: true
            }
        },
        // 柱状图核心配置
        barPercentage: 0.6, // 可自行调整柱子宽度占比
        categoryPercentage: 0.8, // 可自行调整分类区域宽度占比
        skipNull: true, // 跳过null值不渲染也不占空间
        centerInCategory: true, // 非空柱子在当前分类区域内居中
    },
});

配置说明 #

• skipNull: true：开启后数据为null的位置不会渲染柱子，也不会占用该分类下的柱状空间
• centerInCategory: true：开启后当前分类下存在的非空柱子会自动在整个分类区域内居中显示
• 可以根据视觉需求调整barPercentage和categoryPercentage的数值，控制柱子的实际宽度
• 如果业务逻辑不允许直接修改原始数据中的0值，可以在图表实例化前临时遍历数据集，把值为0的项替换为null即可，不会影响原始业务数据

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