Chart.js 填充 padding

Chart.js 选项中的填充值可以以几种不同的格式提供。

Number

如果此值是一个数字，则将其应用于所有边（左、上、右、下）。

例如，为图表的所有边定义一个 20px 的内边距：

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: 20
        }
    }
});

{top, left, bottom, right} 对象

如果此值是一个对象，则 left 属性定义左侧填充。 同样，也可以指定 right、top 和 bottom 属性。 省略的属性默认为 0。

假设我们想在图表画布的左侧添加 50px 的填充，我们可以：

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: {
                left: 50
            }
        }
    }
});

{x, y} 对象

这是将左/右和上/下定义为相同值的简写。

看下面的例子

let chart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: {
        scales: {
          r: {
            ticks: {
              backdropPadding: {
                  x: 10,
                  y: 4
              }
            }
        }
    }
});