时间戳

首页 > 解决方案 > 图表js页脚

chart.js - 图表js页脚

问题描述

我正在尝试向带有图表描述的图表 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 标签在同一行。如果我添加到高度描述根本不可见。如何更改画布的高度以增加描述空间？如果我只改变画布的高度，它也会扩展图表。

谢谢你的帮助！

标签： chart.js

解决方案

好的，我想通了。基本上，我在 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();
}

推荐阅读