スタックされた棒グラフの上部または下部にカスタムラベルを追加します

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

だけ（あなたは別のそれを維持したい場合は、あまりにもプラグインに移動することができます - 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(); 
    } 
}, 
... 

にして、ちょうどあなたの代わりにあなたのスタックラベルを使用http://jsfiddle.net/bm88sd5c/

012 - そう

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

---

更新フィドルのように、インデックスをスタック

スタックラベルをアニメーション化する場合は、drawオーバーライドで_modelを_viewに変更するだけです。

完全な解決方法は、スタックラベルの長さを考慮して（軸ラベルのように）回転させますが、もっと複雑になると思います。