填充

¥Padding

图表选项中的填充值可以以几种不同的格式提供。

¥Padding values in Chart options can be supplied in a couple of different formats.

数字

¥Number

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

¥If this value is a number, it is applied to all sides (left, top, right, bottom).

例如，为图表的所有边定义 20px 的填充：

¥For example, defining a 20px padding to all sides of the chart:

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

{top, left, bottom, right} object

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

¥If this value is an object, the left property defines the left padding. Similarly, the right, top and bottom properties can also be specified. Omitted properties default to 0.

假设你想在图表画布的左侧添加 50px 的填充，你可以这样做：

¥Let's say you wanted to add 50px of padding to the left side of the chart canvas, you would do:

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

{x, y} object

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

¥This is a shorthand for defining left/right and top/bottom to the same values.

例如，径向线性轴 刻度背景填充 上的左/右 10px 和上/下填充 4px：

¥For example, 10px left / right and 4px top / bottom padding on a Radial Linear Axis tick backdropPadding:

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