2

Angular Chartでドーナツ チャートを使用しています。ドーナツの中央にテキストを配置したいと思います。この質問の回答を読みましたが、ツールチップがあり、グラフにカーソルを合わせると何らかの理由でテキストが消えるため、どれもうまくいきません。さらに、このテキストを「外部」から提供する必要があります-カスタムテキスト、たとえばタイトル。

だから、私の考えは次のようなものを持つことです：

var options = {
    innerTitle = "This should be placed in the center of the doughnut"
}

ここに画像の説明を入力

何か案は？

編集:この回答の数行を変更して、 JS Bin を追加しました。

4

3 に答える 3

4

私もこれに一撃。このアプローチは、@RYUUSEiiSTAR のアプローチと作成されたリンクに基づいています。テキストを中央に配置するには、正しい計算を行う必要があります。
デモ用に plunkr を作成しました: https://jsfiddle.net/onoc2wmx/ (新しいリンク)。

更新
数時間のハッキングの後、フォントサイズを変更できるようにコードを更新し、応答するようになりました。これで、次のようになります。

ここに画像の説明を入力

var options = { 
  showTooltips : true,
  animation: true,
  percentageInnerCutout : 70,
  onAnimationComplete: innerTextFunction
};

var chartCtx = $("#canvas").get(0).getContext("2d");
var textCtx = $("#text").get(0).getContext("2d");
var chart = new Chart(chartCtx).Doughnut(doughnutData, options);


function innerTextFunction() {
  var canvasWidthvar = $('#canvas').width();
  var canvasHeight = $('#canvas').height();
  var constant = 114;
  var fontsize = (canvasHeight/constant).toFixed(2);
  textCtx.font = fontsize + "em Verdana";
  textCtx.textBaseline="middle"; 
  var total = 0;
  $.each(doughnutData,function() {
    total += parseInt(this.value,10);
  });
  var tpercentage = ((doughnutData[0].value/total)*100).toFixed(2)+"%";
  var textWidth = textCtx.measureText(tpercentage).width;
  var txtPosx = Math.round((canvasWidthvar - textWidth)/2);
  textCtx.fillText(tpercentage, txtPosx, canvasHeight/4);
}     


<div style="position: relative;">
    <canvas id="text" style="z-index: 1; position: absolute; 
                   left: 0px; top: 0px; width: 300px; height: 300px;"></canvas>
    <canvas id="canvas" style="z-index: 2; position: absolute; 
                   left: 0px; top: 0px; width: 300px; height: 300px;"></canvas>
</div>
于 2015-12-11T17:34:31.733 に答える