Chart.js - Định vị nhãn Donut

Question

Tôi có một trang web đang sử dụng Chart.js. Trong trang này, tôi đang vẽ ba biểu đồ bánh rán. Ở giữa mỗi biểu đồ, tôi muốn hiển thị tỷ lệ phần trăm của bánh rán được lấp đầy. Hiện tại, tôi có đoạn mã sau, có thể thấy trong số Fiddle này.

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

Biểu đồ "chạy". Nhưng vấn đề là với việc kết xuất nhãn. Nhãn không theo chiều dọc và chiều ngang ở giữa bánh rán. Vị trí của nhãn cũng thay đổi dựa trên độ phân giải màn hình. Bạn có thể thấy vị trí thay đổi nhãn bằng cách thay đổi kích thước khung mà các biểu đồ được hiển thị trong phạm vi Fiddle.

Câu hỏi của tôi là, làm thế nào để tôi liên tục định vị phần trăm ở giữa bánh rán? Trang của tôi là một trang đáp ứng nên có vị trí nhất quán là quan trọng Tuy nhiên, tôi không biết phải làm gì khác. Tôi cảm thấy như các thuộc tính textAlign và textBaseline không hoạt động hoặc tôi hiểu nhầm cách sử dụng của chúng.

Cảm ơn!

Answer 1

Xem này http://jsfiddle.net/uha5tseb/2/

Nó có thể được xử lý với nhận chiều rộng/chiều cao của mỗi biểu đồ bằng cách tham khảo này

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

Hy vọng điều này giải quyết vấn đề của bạn!

Answer 2

Bạn đặt biến của mình không chính xác khi bạn nhận xCenter và yCenter. Hiện tại họ không lấy được giữa khung hình.

Bạn có:

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

Nó nên là:

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

Answer 3

Im không quen thuộc với chart.js, nhưng như xa như tôi hiểu từ các tài liệu, họ cung cấp generateLegend phương pháp mục đích của bạn. Nó trả về dữ liệu từ legendCallback mà bạn có thể hiển thị trên trang bên ngoài canvas.

Vùng chứa văn bản chú giải có thể được căn chỉnh tương ứng với trình bao bọc của canvas.

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

Một cách để giải quyết điều này bằng cách thêm một yếu tố hoàn toàn vị trí trên đầu trang của canvas.

Bạn có thể thêm một phần tử div sau mỗi phần tử canvas và sau đó đặt kiểu của nó:

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

Đây là một hoàn 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

Theo this answer, bạn có thể làm điều đó bằng plugin trong phiên bản tiếp theo. Tôi không biết nếu bạn nhận thấy, nhưng nếu bạn tăng chiều rộng và giảm nó hơn và hơn nữa trên fiddle của bạn, chiều cao của vải của bạn trở nên lớn hơn và lớn hơn (biểu đồ đi xa hơn và tiếp tục xuống).

Trên phiên bản bạn đang sử dụng, bạn có thể mở rộng bộ điều khiển doughnut như thế này:

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