Chart js页脚

Question

我正在尝试添加一个带有图表描述的页脚到chart js。到目前为止，我得到了将文本添加到画布的插件。现在的问题是我不能扩展画布高度来适应描述。在不改变图表本身高度的情况下，在图表下增加一些空格进行描述。我的插件是：

    beforeDraw: function (chart) {
    var height = chart.chart.height,
    ctx = chart.chart.ctx;
    ctx.restore();
    ctx.font = "1em sans-serif";
    ctx.fillText("chart description chart description chart description", 20, height -10); //-10 added so decription is visible at all
    ctx.save();
}

看起来是这样的：

​

​

所以你可以看到，它的描述和x标签在同一行。如果我添加到高度，描述是完全不可见的。如何更改画布的高度，以便为描述添加空间？如果我只改变画布的高度，它也会扩展图表。

谢谢你的帮助！

Answer 1

好了，我想通了。基本上，我是在BeforeInit中添加填充，然后在BeforeDraw中添加描述(这里只是本质)：

beforeInit: function (chart, options) {
    let isPieOrDoughnut = chart.config.type === 'pie' || chart.config.type === 'doughnut';
    if (isPieOrDoughnut) {
        chart.options.scales.xAxes[0].gridLines.lineWidth = 0;
        chart.options.scales.xAxes[0].display = true;
    }

    chart.options.scales.xAxes[0].scaleLabel.padding.bottom = 50;
},
beforeDraw: function (chart, options) {
    ctx = chart.chart.ctx;
    ctx.restore();
    ctx.font = "1em sans-serif";
    let height = chart.chart.height;
    ctx.fillText('description', 30, height - 35);
    ctx.save();
}