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

Question

我已经获得了一个分组堆积条形图，其中有一些来自chartjs github页面上的人的帮助。实施很棒，帮助我建立了我正在寻找的图表类型。我现在想要添加的是一个标签来表示每个堆栈的内容。

这是我正在进行的JS小提琴： http://jsfiddle.net/4rjge8sk/1/

我当前的数据集看起来像这样，我想做一个聪明的解决方案，我可以像这样在数据集中添加堆栈标签：

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

以下是我尝试使用堆栈标签构建的理想结果：

我还没有为ChartJS编写插件，但是我想了解如何使用它进行更多绘制。谢谢你的帮助。

Answer 1

也可以覆盖绘图功能（如果你想将它保持分开，也可以将它移到插件中 - 请参阅groupableBar中的https://stackoverflow.com/a/37393862/360067）

...
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'
...

更新了小提琴 - http://jsfiddle.net/bm88sd5c/

如果您希望堆叠标签设置为动画，只需将_model更改为_view覆盖中的draw即可。

完整的解决方案还会考虑堆栈标签的长度并旋转它（就像轴标签一样），但我认为这会更复杂。