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

我有一个分组堆积条形图，其中有一些来自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强制插件但是我想知道如何再画一点点。谢谢你的帮助。

来源

2016-05-31 Strangegroove

只是覆盖绘制函数太（你可以，如果你想保持它单独将它移动到一个插件太 - 看到https://stackoverflow.com/a/37393862/360067）在groupableBar

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

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

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

来源

2016-06-02 14:58:28 potatopeelings

他们是否有一个内置属性或某些东西让图表显示每个堆积条的标签，无论是在工具提示还是作为图例？就像他们处理data.datasets [x] .label一样 – Jeb50

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

回答

相关问题