是否可以在Chart.js中仅调整图表标题的底部填充？

Question

基于documentation，Chart.js中标题的padding属性会同时调整顶部和底部填充。但是，我只想调整底部的填充。

我尝试使用填充对象：

title:{
    display: true,
    text:'Population of cities in California',
    padding:{
        left:0,
        right:0,
        bottom:30,
        top:0
    }
}

但是这可能不受支持，因为它搞砸了所有内容，甚至使图表不可见。我已经搜索了文档并在Google上搜索了一下，以查看是否已经有人问过这个问题，但是我找不到任何解决方案。

Chart.js中是否有内置方法可以做到这一点？如果没有，最简单的解决方法是什么？

Answer 1

[title.padding取标题文本上方和下方添加的像素数。

[仅在图表标题的底部有一种解决方法可添加填充。 title.padding提供了一系列可用于执行自定义代码的挂钩。您可以使用Plugin Core API钩子使用afterDraw直接在画布上自己绘制标题。

CanvasRenderingContext2D.fillText()

与此同时，您必须为图表定义顶部CanvasRenderingContext2D.fillText()。这确定了标题和图表之间的空间（基本上是标题底部的填充）。

plugins: [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    ctx.textAlign = 'center';
    ctx.font = "18px Arial";
    ctx.fillStyle = "gray";
    ctx.fillText('My Title', chart.chart.width / 2, 20);
    ctx.restore();
  }
}],

请看下面的代码，显示它的外观。

padding

layout: {
  padding: {
    top: 80
  }
},