如何從chart.js更改折線圖中標籤的背景顏色？

Question

有沒有辦法改變charts.js中標籤的背景顏色。例如，我想在我的折線圖中更改背景顏色幾個月：

var data = { 
labels: ["January", "February", "March", "April", "May", "June", "July"], 
datasets: [...] 

};

在v1.0.1中有這個選項嗎？還是其他版本？

Answer 1

您可以擴展圖表做到這一點

---

預覽

---

腳本

Chart.types.Line.extend({ 
    name: "LineAlt", 
    initialize: function(){ 
     // add some extra width the the y axis labels 
     this.options.scaleLabel = " " + this.options.scaleLabel; 
     Chart.types.Line.prototype.initialize.apply(this, arguments); 
    }, 
    draw: function(){ 
     Chart.types.Line.prototype.draw.apply(this, arguments); 

     ctx.save(); 
     ctx.fillStyle = '#fcc'; 
     // the fill should be under the text 
     ctx.globalCompositeOperation = "destination-over" 

     // draw background under x axis labels 
     Chart.helpers.each(this.scale.xLabels, function(label, index){ 
      var xPos = this.calculateX(index) + Chart.helpers.aliasPixel(this.lineWidth), 
      isRotated = (this.xLabelRotation > 0); 

      ctx.save(); 
      ctx.translate(xPos, (isRotated) ? this.endPoint + 12 : this.endPoint + 8); 
      ctx.rotate(Chart.helpers.radians(this.xLabelRotation) * -1); 
      var width = ctx.measureText(label).width; 
      // add a 4px padding on each side 
      // the height is set to 1.5 times the font size since there is no method to measure height easily 
      ctx.fillRect(-width/2 - 4, 0, width + 8, this.fontSize * 1.5); 
      ctx.restore(); 
     }, this.scale) 

     // draw background under y axis labels 
     var yLabelGap = (this.scale.endPoint - this.scale.startPoint)/this.scale.steps, 
      xStart = Math.round(this.scale.xScalePaddingLeft); 
     Chart.helpers.each(this.scale.yLabels,function(labelString, index){ 
        var yLabelCenter = this.endPoint - (yLabelGap * index); 
      var width = ctx.measureText(labelString).width; 
      // add some padding on the side - we don't need to increase the width because we use the width added by the extra space 
      ctx.fillRect(xStart - width - 4, yLabelCenter - this.fontSize * 1.5/2, width, this.fontSize * 1.5); 
     }, this.scale); 

     ctx.restore(); 
    } 
}); 

然後

... 
new Chart(ctx).LineAlt(data); 

---

小提琴 - http://jsfiddle.net/e894g5qn/