將自定義標籤添加到堆積條形圖的頂部或底部

我有一個分組堆積條形圖，其中有一些來自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

將自定義標籤添加到堆積條形圖的頂部或底部

回答

相關問題