Chart.js - Pozycjonowanie Etykieta pączka

Question

Mam stronę internetową, która używa Chart.js. Na tej stronie wyświetlam trzy wykresy pączków. Na środku każdego wykresu chcę pokazać procent wypełnionego pączka. Obecnie mam następujący kod, który można zobaczyć w tym Fiddle.

function setupChart(chartId, progress) { 
    var canvas = document.getElementById(chartId); 
    var context = canvas.getContext('2d'); 

    var remaining = 100 - progress; 
    var data = { 
    labels: [ 'Progress', '', ], 
    datasets: [{ 
     data: [progress, remaining], 
     backgroundColor: [ 
     '#8FF400', 
     '#FFFFFF' 
     ], 
     borderColor: [ 
     '#8FF400', 
     '#408A00' 
     ], 
     hoverBackgroundColor: [ 
     '#8FF400', 
     '#FFFFFF' 
     ] 
    }] 
    }; 

    var options = { 
    responsive: true, 
    maintainAspectRatio: false, 
    scaleShowVerticalLines: false, 

    cutoutPercentage: 80, 
    legend: { 
     display: false 
    }, 
    animation: { 
     onComplete: function() { 
     var xCenter = (canvas.width/2) - 20; 
     var yCenter = canvas.height/2 - 40; 

     context.textAlign = 'center'; 
     context.textBaseline = 'middle'; 

     var progressLabel = data.datasets[0].data[0] + '%'; 
     context.font = '20px Helvetica'; 
     context.fillStyle = 'black'; 
     context.fillText(progressLabel, xCenter, yCenter); 
     } 
    } 
    }; 

    Chart.defaults.global.tooltips.enabled = false; 
    var chart = new Chart(context, { 
    type: 'doughnut', 
    data: data, 
    options: options 
    }); 
} 

Wykres "działa". Ale problem polega na renderowaniu etykiety. Etykieta nie jest wyśrodkowana pionowo i poziomo w środku pączka. Pozycja etykiety zmienia się również w zależności od rozdzielczości ekranu. Możesz zobaczyć pozycję zmiany etykiety, zmieniając rozmiar ramki, w której wykresy są renderowane w ramach Fiddle.

Moje pytanie brzmi: jak konsekwentnie pozycjonować procent w środku pączka? Moja strona to strona responsywna, więc ważne jest stałe pozycjonowanie. Nie jestem jednak pewien, co jeszcze mogę zrobić. Czuję, że właściwości textAlign i textBaseline nie działają lub nie rozumiem ich użycia.

Dzięki!

Answer 1

Zobacz ten http://jsfiddle.net/uha5tseb/2/

To może być traktowane z coraz szerokość/wysokość każdego wykresu przez to odniesienie

onComplete: function (event) { 
    console.log(this.chart.height); 
    var xCenter = this.chart.width/2; 
    var yCenter = this.chart.height/2; 

    context.textAlign = 'center'; 
    context.textBaseline = 'middle'; 

    var progressLabel = data.datasets[0].data[0] + '%'; 
    context.font = '20px Helvetica'; 
    context.fillStyle = 'black'; 
    context.fillText(progressLabel, xCenter, yCenter); 
    } 

nadzieję, że to rozwiąże problem!

Answer 2

Ustawiasz zmienne niepoprawnie, gdy otrzymujesz xCenter i yCenter. Obecnie nie znajdują się na środku płótna.

Masz:

var xCenter = (canvas.width/2) - 20; 
var yCenter = canvas.height/2 - 40; 

Powinno być:

var xCenter = (canvas.width/2); 
var yCenter = (canvas.height/2); 

Answer 3

Im nie zna chart.js, ale o ile zrozumiałem z dokumentacji, stanowią one generateLegend metodę twoje cele. Zwraca dane z legendCallback, które można wyświetlić na stronie poza obszarem roboczym.

Kontener tekstu legendy można wyrównać względem obwoluty płótna.

HTML:

<div class="chart" data-legend=""> 
    <canvas id="standChart"></canvas> 
</div> 

JS:

var container = canvas.parentElement; 
... 
container.setAttribute('data-legend', chart.generateLegend()); 

Fiddle

Answer 4

Jednym ze sposobów rozwiązania tego problemu jest dodanie elementu pozycjonowanego bezwzględnie na górze płótnie.

można dodać elementu div po każdym elemencie canvas, a następnie ustawić jego styl:

.precentage { 
    font-family: tahoma; 
    font-size: 28px; 
    left: 50%; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

Powyżej znajduje się pełna JSFiddle.

Answer 5

We Give Size of the Chart Can be with in the Chart And Align to center on the Give the hight width based on the Chart Hight and Width.. 
i will make simple change in Your Jsfiddle 
.. 
xcenter and y center with the half distence for chart.. 

[http://jsfiddle.net/uha5tseb/10/][1] 

Answer 6

Według this answer można to zrobić za pomocą wtyczki w innej wersji. Nie wiem, czy zauważyłeś, ale jeśli zwiększysz szerokość i zmniejszysz ją w kółko na swojej skrzypce, wysokość twojego płótna staje się coraz większa (wykres idzie dalej i dalej).

wersji używasz, można rozszerzyć kontroler doughnut takiego:

http://jsfiddle.net/ivanchaer/cutkqkuz/1/

Chart.defaults.DoughnutTextInside = Chart.helpers.clone(Chart.defaults.doughnut); 
Chart.controllers.DoughnutTextInside = Chart.controllers.doughnut.extend({ 
    draw: function(ease) { 

     var ctx = this.chart.chart.ctx; 
     var data = this.getDataset(); 

     var easingDecimal = ease || 1; 
     Chart.helpers.each(this.getDataset().metaData, function(arc, index) { 
      arc.transition(easingDecimal).draw(); 

      var vm = arc._view; 
      var radius = (vm.outerRadius + vm.innerRadius)/2; 
      var thickness = (vm.outerRadius - vm.innerRadius)/2; 
      var angle = Math.PI - vm.endAngle - Math.PI/2; 

      ctx.save(); 
      ctx.fillStyle = vm.backgroundColor; 

      ctx.font = "20px Verdana"; 
      ctx.textAlign = 'center'; 
      ctx.textBaseline = "middle"; 

      var text = data.data[0] + '%'; 
      ctx.fillStyle = '#000'; 
      ctx.fillText(text, $(ctx.canvas).width()/2, $(ctx.canvas).height()/2); 
     }); 
     ctx.fillStyle = '#fff'; 
     ctx.fill(); 
     ctx.restore(); 

    } 

}); 


function setupChart(chartId, progress) { 
    var canvas = document.getElementById(chartId); 
    var context = canvas.getContext('2d'); 
    var remaining = 100 - progress; 

    var deliveredData = { 
     labels: [ 
      "Value" 
     ], 
     datasets: [{ 
      data: [progress, remaining], 
      backgroundColor: [ 
       '#8FF400', 
       '#FFFFFF' 
      ], 
      borderColor: [ 
       '#8FF400', 
       '#408A00' 
      ], 
      hoverBackgroundColor: [ 
       '#8FF400', 
       '#FFFFFF' 
      ] 
     }] 
    }; 

    var deliveredOpt = { 
     cutoutPercentage: 88, 

     animation: false, 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      enabled: false 
     } 
    }; 

    var chart = new Chart(canvas, { 
     type: 'DoughnutTextInside', 
     data: deliveredData, 
     options: deliveredOpt 
    }); 

} 

setupChart('standChart', 33); 
setupChart('moveChart', 66); 
setupChart('exerciseChart', 99);