Jak dodać etykiety do wtyczki płótna Chart.js?

Question

Używam niesamowitej wtyczki Chart.js i próbuję znaleźć sposób wyświetlania etykiet w ramach każdej wartości procentowej. Więc ja googled go i znalazłem ten naciąg: https://github.com/nnnick/Chart.js/pull/35

Zrobiłem prosty skrzypce go przetestować, ale nie działa: http://jsfiddle.net/marianico2/7ktug/1/

To jest treść:

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

---

Obawiam się, nie ma informacji na ten temat w documentation.

Chciałbym również wiedzieć, jak wyświetlić etykietę dla każdej porcji, ale poza wykresem. Połączone linią. Podobnie jak wykresy highcharts.js.

Nawiasem mówiąc, byłbym zadowolony, gdybyś polecił mi alternatywę wykresu html5, która zawiera opcje, które powiedziałem powyżej. Słyszałem o wtyczce flot, ale obawiam się, że nie obsługuje ona animacji ...

Jeśli potrzebujesz więcej informacji, daj mi znać, a ja edytuję wpis.

Answer 1

Będziesz musiał dodać kod w 2 miejscach. Na przykład weź pączek. Najpierw dodać informacje wytwórnię do domyślnych (spojrzeć na oryginalnym kodzie Chart.js i porównać z tym):

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

Następnie przejdź w dół do miejsca, gdzie Donut jest zasysane i dodać cztery ctx linie.

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

ctx.fillText wezwanie będzie można umieścić tekst na płótnie, dzięki czemu można używać, aby napisać tekst ze współrzędnymi X, Y. Powinieneś być w stanie użyć tej metody do tworzenia podstawowych etykiet. Oto jsfiddle majstrować przy:

http://jsfiddle.net/nCFGL/ (spojrzenie na liniach 281 i 772 na odcinku JavaScript w jsfiddle dla wspomnianego kodu)

Jeśli potrzebujesz czegoś bardziej wyszukane, ktoś rozwidlony wersję Charts.js i dodano podpowiedzi. Oto dyskusja https://github.com/nnnick/Chart.js/pull/35, a będziesz w stanie znaleźć link do rozwidlonej wersji wewnątrz tej dyskusji.

Answer 2

Wymyśliłem sposób, aby wyświetlić wartości dla każdego regionu poza bokiem wykresu.

również usunąłem obrót wartościami i ja, o którym mowa here

Dodaj poniższe linie kodu wewnątrz funkcji pączka. (Wkleiłem zmodyfikowane linie z pliku 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(); 
    } 

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

Teraz wartości będą wyświetlane z każdej strony i nie zostaną obrócone.

Answer 3

Istnieje wersja rozwidlona, ​​ChartNew, która zapewnia tę funkcjonalność po wyjęciu z pudełka.

Jeśli trzeba użyć ChartJS następnie można użyć tej poprawionej wersji @ rozwiązania Jacka:

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

Ten dosłownie trwało wiele godzin i znalazłem roztwór roboczy.

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

To był mój ostatni kod. Starałem się wyświetlać procentowe jak etykiety na pączka

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