如何在PrimeNG的Chart.js中为图例添加顶部边距

我用Chart.js绘制图表时，将图例放在底部，但图表和图例之间的间距太小。之前尝试设置layout.padding，但这会同时缩小包含图表和图例的整个布局的宽高，请问怎么单独调整图例和图表之间的边距？

我的配置代码如下：

const CHART_OPTIONS = {
    layout: {
        padding: 30
    },
    legend: {
        position: 'bottom',
    },
    tooltips: {
        callbacks: {
          title: () => undefined
        }
    },
    plugins: {
        datalabels: {
            anchor: 'end',
            align: 'end',
            color: 'black',
            font: {
                weight: 'bold',
                size: 16
            },
            formatter: (val) => val + '%',
        }
    },
}

数据定义：

const data = {
            labels: ['data1', 'data2', 'data3'],
            datasets: [
                {
                    backgroundColor: BACKGROUND_COLORS,
                    data: data.map(_ => _.percent)
                },
            ],
            plugins: [ChartDataLabels],
        }

解决方案 #

根据Chart.js的版本，你可以用以下几种方法调整，不会影响图表主体的大小：

方法1：给图例设置外部边距（推荐）

直接在legend配置中添加margin属性，这会控制图例与图表主体之间的间距，不会改变图表本身的尺寸：

const CHART_OPTIONS = {
    // ...其他配置
    legend: {
        position: 'bottom',
        margin: 30 // 调整这个值来设置你需要的间距
    },
    // ...其他配置
}

方法2：定向设置布局内边距

如果方法1不生效，你可以放弃全局padding，改为定向设置底部内边距，这样只有底部预留空间给图例，其他方向的布局不受影响：

const CHART_OPTIONS = {
    layout: {
        padding: {
            top: 10,
            left: 10,
            right: 10,
            bottom: 60 // 底部单独设置更大的内边距，拉开图例和图表的距离
        }
    },
    // ...其他配置
}

方法3：针对Chart.js v3+的插件式配置

如果你用的是Chart.js v3及以上版本，可以通过plugins.legend来配置图例的内边距，间接拉开与图表的距离：

const CHART_OPTIONS = {
    // ...其他配置
    plugins: {
        legend: {
            position: 'bottom',
            padding: 20 // 图例容器的内边距，会增加图例与图表的间距
        },
        datalabels: {
            // ...你的datalabels配置
        }
    },
}

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