Wie ändere ich die Hintergrundfarbe der Etiketten im Liniendiagramm von chart.js?

Question

Gibt es eine Möglichkeit, die Hintergrundfarbe von Beschriftungen in charts.js zu ändern. Zum Beispiel möchte ich die Farbe des Hintergrunds für Monate in meinem Liniendiagramm ändern:

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

};

Gibt es eine Option dafür in v1.0.1? Oder irgendeine andere Version?

Answer 1

können Sie das Diagramm erweitern diese

---

Vorschau zu tun

---

Script

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(); 
    } 
}); 

und dann

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

---

Fiddle - http://jsfiddle.net/e894g5qn/