2

我在Angular Chart中使用圆环图。我想在甜甜圈的中心放置一些文字。我已经阅读了这个问题的答案,但没有一个对我有用,因为我有工具提示,并且由于某种原因,当您悬停图表时,文本会消失。此外,我需要从“外部”提供此文本 - 自定义文本,例如标题。

所以,我的想法是有类似的东西:

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

在此处输入图像描述

有任何想法吗?

编辑: 我通过更改此答案的几行添加了一个JS Bin

4

3 回答 3

4

我会试一试。这种方法只是将标签绝对定位在画布顶部。唯一的缺点是您必须设置 和 的高度和#canvas-holder宽度canvas。我创建了一个 plunkr 来演示:http ://plnkr.co/edit/kT63Ur5ebNm1A6bQWSlO

<!-- css -->
#canvas-holder {
  height: 100px;
  width: 100px;
  position: relative;
}

.chart-title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

<!-- canvas -->
<div id="canvas-holder">
    <label class="chart-title">My Chart Title</label>
    <canvas id="chart-area" height="100" width="100" />
</div>
于 2015-12-11T16:55:36.340 回答
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 回答
1

只需调整%onbottomfont-sizecss

<div class="row charDonut">
   <div class="chartTitle">
     {{vm.totalTask}}<br>
     {{vm.chartTitle}}
   </div>
   <canvas id="doughnut" class="chart chart-doughnut">
   </canvas>
</div>

.row.charDonut{
  position: relative;
}

.chartTitle{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36%; <<----
  text-align: center;
  font-size: 2em; <<----
}
于 2017-05-04T14:16:37.583 回答