Javascript 将自定义标签添加到堆叠条形图的顶部或底部

在chartjs github页面上的人员的帮助下，我得到了一个分组堆叠条形图。实现是伟大的，并帮助我建立了我正在寻找的图表类型。我现在要添加的是一个标签，用来表示每个堆栈是什么

这是我正在制作的JS小提琴：

我当前的数据集如下所示，我想提出一个聪明的解决方案，在该解决方案中，我可以向数据集中添加堆栈标签，如下所示：

datasets: [
    {
      label: "Apples",
      backgroundColor: "rgba(99,255,132,0.2)",
      data: [20, 10, 30],
      stack: 1,
      stackLabel: "Stack 1"
    }

下面是我试图用堆栈标签构建的期望结果：

---

我还不擅长为ChartJS编写插件，但我想进一步了解如何使用它进行绘图。谢谢您的帮助。

只需在

groupableBar中覆盖draw函数（如果您想将其分开，也可以将其移动到插件中-请参阅）

...
draw: function(ease) {
    Chart.controllers.bar.prototype.draw.apply(this, arguments);

    var self = this;
    // check if this is the last dataset in this stack
    if (!this.chart.data.datasets.some(function (dataset, index) { return (dataset.stack === self.getDataset().stack && index > self.index); })) {
        var ctx = this.chart.chart.ctx;
        ctx.save();
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillStyle = this.chart.options.defaultFontColor;
        // loop through all its rectangles and draw the label
        helpers.each(self.getMeta().data, function (rectangle, index) {
            ctx.fillText(this.getDataset().stack, rectangle._model.x, rectangle._model.y)
        }, this);
        ctx.restore();
    }
},
...

然后用堆栈标签代替堆栈索引，如下所示

...
stack: 'Stack 1'
...


更新小提琴-

如果希望堆栈标签具有动画效果，只需将
绘图
覆盖中的
\u model
更改为
\u view

一个完整的解决方案也会考虑堆栈标签的长度并旋转它（就像轴标签），但是我认为这会更复杂。
它们是否有内置属性，或者告诉图表显示每个堆叠条的标签，无论是在工具提示还是作为图例？就像他们处理数据一样。数据集[x]。labelDo你知道我如何使它水平吗？