Chart.js - 位置決め用ドーナツラベル

Question

私はChart.jsを使用しているWebページを持っています。このページでは、3つのドーナッツチャートをレンダリングしています。各グラフの真ん中に、満たされているドーナツの割合を示したいと思います。現在、私はこの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 
    }); 
} 

グラフは「実行されます」。しかし、問題はラベルの表示にあります。ラベルは、ドーナツの中央の中で、縦方向および横方向の中央に配置されていない。ラベルの位置も画面解像度に基づいて変化します。 Fiddle内のチャートがレンダリングされるフレームのサイズを変更することで、ラベルの変更位置を確認できます。

私の質問は、ドーナツの中央にパーセンテージを一貫して配置するにはどうすればいいですか？私のページは応答性の高いページなので、一貫したポジショニングが重要ですが、何をすべきかは分かりません。 textAlignとtextBaselineのプロパティが機能していないか、その使用法が誤解されています。

ありがとうございます！

Answer 1

が、これはあなたの問題を解決希望

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

このhttp://jsfiddle.net/uha5tseb/2/

それはこの参照によって各チャートの取得幅/高さで扱うことができます参照してください！

Answer 2

xCenterとyCenterを取得すると、変数を間違って設定します。現在、彼らはキャンバスの真ん中を取得していません。

あなたが持っている：

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

それは次のようになります。chart.jsに精通していない

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

Answer 3

イムしかし、私の知る限りでは、ドキュメントから分かるように、彼らはのためのgenerateLegend方法を提供あなたの目的。キャンバス以外のページに表示できるlegendCallbackのデータを返します。

凡例テキストのコンテナは、キャンバスのラッパーと相対的に配置できます。

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

一つの方法は、キャンバスの上に絶対位置の要素を加えることです。

あなたはそれぞれのcanvas要素の後にdiv要素を追加し、その後にそのスタイルを設定することができます。完全なJSFiddleです。ここ

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

。

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

this answerによると、それ以降のバージョンではプラグインで実行できます。あなたが気づいたかどうかは分かりませんが、幅を広げてフィドルで何度も繰り返し減らすと、キャンバスの高さが大きくなります（グラフはさらに下に行く）。使用しているバージョンに

、あなたがこのようなdoughnutコントローラ拡張することができ：

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