Wie fügt man dem Chart-Plugin "Chart.js" Beschriftungen hinzu?

Question

Ich verwende das tolle Plugin Chart.js, und ich versuche, die Art und Weise der Display-Etiketten innerhalb jedes Prozents zu finden. So gegoogelt ich es, und ich fand diesen Pull: https://github.com/nnnick/Chart.js/pull/35

ich eine einfache Geige tat es zu testen, aber nicht funktioniert: http://jsfiddle.net/marianico2/7ktug/1/

Dies ist der Inhalt:

HTML

<canvas id="canvas" height="450" width="450"></canvas> 

JS

$(document).ready(function() { 
    var pieData = [{ 
     value: 30, 
     color: "#F38630", 
     label: 'HELLO', 
     labelColor: 'black', 
     labelFontSize: '16' 
    }, { 
     value: 50, 
     color: "#E0E4CC" 
    }, { 
     value: 100, 
     color: "#69D2E7" 
    }]; 

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData, { 
     labelAlign: 'center' 
    }); 
}); 

---

Ich fürchte, es gibt keine Informationen darüber im documentation.

Ich würde auch gerne wissen, wie man ein Etikett für jeden Teil, aber außerhalb des Diagramms anzeigen. Verbunden durch eine Linie. Wie auch die Charts von highcharts.js.

Übrigens, ich würde mich freuen, wenn Sie mir eine html5-Chart-Alternative empfehlen, die die oben genannten Optionen enthält. Ich habe über das Plugin flot gehört, aber ich befürchte keine Animationen ...

Wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen und ich werde den Beitrag bearbeiten.

Answer 1

Sie müssen Code an 2 Stellen hinzufügen. Nehmen Sie zum Beispiel den Donut. Erste Label Info auf die Standardwerte hinzufügen (Blick auf das Original Chart.js Code und vergleichen Sie mit diesem):

chart.Doughnut.defaults = { 
     segmentShowStroke : true, 
     segmentStrokeColor : "#fff", 
     segmentStrokeWidth : 2, 
     percentageInnerCutout : 50, 
     animation : true, 
     animationSteps : 100, 
     animationEasing : "easeOutBounce", 
     animateRotate : true, 
     animateScale : false, 
     onAnimationComplete : null, 
     labelFontFamily : "Arial", 
     labelFontStyle : "normal", 
     labelFontSize : 24, 
     labelFontColor : "#666" 
    }; 

Dann gehen nach unten, wo die Donut gezogen und die vier ctx Linien hinzuzufügen.

animationLoop(config,null,drawPieSegments,ctx); 

    function drawPieSegments (animationDecimal){ 
     ctx.font = config.labelFontStyle + " " + config.labelFontSize+"px " + config.labelFontFamily; 
     ctx.fillStyle = 'black'; 
     ctx.textBaseline = 'middle'; 
     ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200); 

Der ctx.fillText Anruf wird der Text auf die Leinwand setzen, so dass Sie, dass der Text mit x, y-Koordinaten schreiben können. Sie sollten in der Lage sein, auf diese Weise grundlegende Etiketten zu erstellen. Hier ist die jsfiddle herumzubasteln mit:

http://jsfiddle.net/nCFGL/ (Blick auf Linien 281 und 772 in dem JavaScript-Abschnitt des jsfiddle für oben genannten Code)

Wenn Sie etwas ausgefallenere brauchen, jemand eine Version von Charts.js gegabelt und Tooltips hinzugefügt. Hier ist die Diskussion https://github.com/nnnick/Chart.js/pull/35, und Sie werden den Link zu der gegabelten Version innerhalb dieser Diskussion finden können.

Answer 2

Ich habe einen Weg gefunden, so dass wir die Werte für jede Region außerhalb des Graphen anzeigen können.

Auch entfernte ich die Rotation der Werte und I bezeichnet here

die folgenden Zeilen von Code innerhalb der Funktion Donut hinzufügen. (Ich habe die geänderten Zeilen aus der Datei Chart.js eingefügt).

var Doughnut = function(data,config,ctx){ 

    var segmentTotal = 0; 

    //In case we have a canvas that is not a square. Minus 10 pixels as padding round the edge. 
    var doughnutRadius = Min([height/2,width/2]) - 15; 
    var cutoutRadius = doughnutRadius * (config.percentageInnerCutout/100); 
    //Modified for setting the label values out side the arc 
    var outRadius= doughnutRadius + cutoutRadius/3; 
    var outRadiustop= doughnutRadius + cutoutRadius/5; 
    ...... 
    ...... 
    ...... 

    function drawPieSegments (animationDecimal){ 
    : 
    : 



     if (config.scaleShowValues) { 
       ctx.save();     
       ctx.translate(width/2, height/2); 
       ctx.font = config.scaleFontStyle + ' ' + config.scaleFontSize + 'px ' + config.scaleFontFamily; 
       ctx.textBaselne = 'middle'; 
       var a = (cumulativeAngle + cumulativeAngle + segmentAngle)/2, 
        w = ctx.measureText(data[i].value).width, 
        b = Math.PI/2 < a && a < Math.PI * 3/2; 
       var c = 0 < a && a < Math.PI; 
       if(b){ 
        ctx.textAlign = 'right'; 
       } 
       else{ 
        ctx.textAlign = 'left'; 
       } 
       if(c){ 
        ctx.translate(Math.cos(a) * outRadius +1 , Math.sin(a) * outRadius+1); 

       } 
       else{ 
        ctx.translate(Math.cos(a) * outRadiustop, Math.sin(a) * outRadiustop);  
       } 

       ctx.fillStyle = config.scaleFontColor; 
       //If the segment angle less than 0.2, then the lables will overlap, so hiding it. 
       if(segmentAngle > 0.2){ 
        ctx.fillText(data[i].value,0,0); 

       } 
       ctx.restore(); 
    } 

    ...... 
    ...... 

Jetzt werden die Werte auf jeder Seite angezeigt und es wird nicht gedreht.

Answer 3

Es gibt eine gegabelte Version ChartNew, die diese Funktionalität von Anfang an bietet.

Wenn Sie ChartJS verwenden müssen, dann können Sie diese überarbeitete Version von @ Lösung Jack verwenden:

Chart.types.Doughnut.extend({ 
    name: "DoughnutAlt", 
    draw: function() { 
     Chart.types.Doughnut.prototype.draw.apply(this, arguments); 
     this.chart.ctx.fillStyle = 'black'; 
     this.chart.ctx.textBaseline = 'middle'; 
     this.chart.ctx.fillText(this.segments[0].value + "%", this.chart.width/2 - 20, this.chart.width/2, 200); 
    } 
}); 

Answer 4

Dieser nahm buchstäblich Stunden und Stunden und ich eine funktionierende Lösung gefunden.

https://github.com/nnnick/Chart.js/pull/116

Das war mein letzter Code. Ich habe versucht, Prozentsätze als Etiketten auf Donut Sie https://github.com/Regaddi/Chart.js geschrieben

Chart.types.Doughnut.extend({ 
name: "DoughnutAlt", 
draw: function() { 
    Chart.types.Doughnut.prototype.draw.apply(this, arguments); 
    this.chart.ctx.fillStyle = 'black'; 
    this.chart.ctx.textBaseline = 'middle'; 
    this.chart.ctx.textAlign = 'start'; 
    this.chart.ctx.font="18px Verdana"; 

    var total = 0; 
    for (var i = 0; i < this.segments.length; i++) { 
     total += this.segments[i].value;  
    } 

    this.chart.ctx.fillText(total , this.chart.width/2 - 20, this.chart.height/2, 100); 
    for(var i = 0; i < this.segments.length; i++){ 
     var percentage = ((this.segments[i].value/total) * 100).toFixed(1); 
     if(percentage > 3){ 
      var centreAngle = this.segments[i].startAngle + ((this.segments[i].endAngle - this.segments[i].startAngle)/2), 
       rangeFromCentre = (this.segments[i].outerRadius - this.segments[i].innerRadius)/2 + this.segments[i].innerRadius; 
      var x = this.segments[i].x + (Math.cos(centreAngle) * rangeFromCentre); 
      var y = this.segments[i].y + (Math.sin(centreAngle) * rangeFromCentre); 
      this.chart.ctx.textAlign = 'center'; 
      this.chart.ctx.textBaseline = 'middle'; 
      this.chart.ctx.fillStyle = '#fff'; 
      this.chart.ctx.font = 'normal 10px Helvetica'; 
      this.chart.ctx.fillText(percentage , x, y); 
     } 
    } 
} 
});