Chart.js：不修改Canvas尺寸，如何调整图表自身宽高？

• 添加图表内边距：通过layout.padding配置给图表四周预留空间，让偏移的数据标签能完整显示，同时不改变Canvas的宽高。配置示例：

options: {
  layout: {
    padding: {
      right: 50, // 匹配datalabels的offset值，按需调整
      top: 20, // 解决折线图顶部标签溢出问题
      bottom: 10,
      left: 10
    }
  },
  datalabels: {
    align: "end",
    offset: 40
  }
}

• 缩小图表自身尺寸：若需主动缩小图表，可通过aspectRatio调整图表的宽高比例，配合maintainAspectRatio: true确保缩放时保持比例，Canvas容器宽高不变的情况下，图表会自动缩小以适配容器内的空间。示例：

options: {
  maintainAspectRatio: true,
  aspectRatio: 1.2, // 数值越小，图表整体尺寸越小，按需调整
  datalabels: {
    align: "end",
    offset: 40
  }
}

• 折线图顶部溢出补充处理：针对折线图顶部标签的问题，还可以通过设置Y轴的suggestedMax，让坐标轴顶部预留额外空间，避免标签超出：

options: {
  scales: {
    y: {
      suggestedMax: function(context) {
        // 取数据最大值的1.1倍，给顶部留10%的空间
        return Math.max(...context.dataset.data) * 1.1;
      }
    }
  },
  datalabels: {
    align: "end",
    offset: 40
  }
}

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