Come aggiungere etichette al plug-in canvas di Chart.js?

Question

Sto usando il fantastico plugin Chart.js e sto cercando di trovare il modo di visualizzare le etichette all'interno di ogni percentuale. Così ho cercato su google, e ho trovato questo tiro: https://github.com/nnnick/Chart.js/pull/35

ho fatto un semplice piano rispetto a testarlo, ma non opere: http://jsfiddle.net/marianico2/7ktug/1/

Questo è il contenuto:

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

---

ho paura non ci sono informazioni su questo nel documentation.

Inoltre mi piacerebbe sapere come visualizzare un'etichetta per ogni porzione, ma al di fuori del grafico. Collegato da una linea. Così come i grafici di highcharts.js.

A proposito, sarei lieto se mi consigliate un'alternativa di tabella html5 che include le opzioni che ho detto sopra. Ho sentito parlare del plug-in flot, ma temo che non supporti le animazioni ...

Se hai bisogno di maggiori informazioni, fammelo sapere e io modificherò il post.

Answer 1

Dovrai aggiungere il codice in 2 posizioni. Ad esempio, prendi la ciambella. In primo luogo aggiungere informazioni etichetta per le impostazioni di default (vedi il codice originale Chart.js e paragonabile a questo):

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" 
    }; 

Poi vai giù al punto in cui è disegnata la ciambella e aggiungere le quattro ctx linee.

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

La chiamata ctx.fillText metterà il testo sulla tela, in modo da poter utilizzare che per scrivere il testo con le coordinate x, y. Dovresti essere in grado di usare questo modo per fare etichette di base. Ecco l'jsfiddle armeggiare con:

http://jsfiddle.net/nCFGL/ (sguardo alle linee 281 e 772 nella sezione JavaScript del jsfiddle per il codice di cui sopra)

Se avete bisogno di qualcosa di più elaborato, qualcuno biforcuta una versione di Charts.js e aggiunto tooltip. Ecco la discussione https://github.com/nnnick/Chart.js/pull/35, e sarete in grado di trovare il link alla versione biforcuta all'interno di quella discussione.

Answer 2

Ho trovato un modo in cui possiamo visualizzare i valori per ogni regione fuori dal grafico.

Inoltre ho rimosso la rotazione dei valori e di cui here

Aggiungere le seguenti righe di codice all'interno della funzione ciambella. (Ho incollato le righe modificate dal file Chart.js).

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

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

Ora i valori verranno visualizzati all'esterno di ciascuna sezione e non verranno ruotati.

Answer 3

Esiste una versione a forcella, ChartNew, che fornisce questa funzionalità immediatamente.

Se avete bisogno di usare ChartJS quindi è possibile utilizzare questa versione riveduta del @ soluzione di Jack:

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

Questo letteralmente preso ore e ore e ho trovato una soluzione di lavoro.

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

Questo è stato il mio codice finale. Stavo cercando di visualizzare le percentuali come etichette su ciambella

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