angularjs - 如何在 Angular Chart 的圆环图中添加标题？

Question

我正在使用 doughnut chart在 Angular Chart .我想在 donut 的中心放置一些文字。我读过 this question's答案，但它们都不适合我，因为我有工具提示，并且出于某种原因，当您将鼠标悬停在图表上时，文本会消失。此外，我需要从“外部”提供此文本 - 自定义文本，例如一个标题。

所以，我的想法是:

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

有什么想法吗？

编辑:我添加了一个 JS Bin通过更改几行 this answer .

Answer 1

我也试过这个。这种方法基于@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>