如何在 Angular 图表的圆环图中添加标题?
How to add title inside doughnut chart in Angular Chart?
我正在使用 doughnut chart in Angular Chart. I want to place some text in the center of the doughnut. I've read this question's 个答案,但其中 none 个对我有用,因为我有工具提示,并且出于某种原因,当您将鼠标悬停在图表上时,文本会消失。此外,我需要提供来自 "outside" 的文本 - 自定义文本,例如一个标题。
所以,我的想法是:
var options = {
innerTitle = "This should be placed in the center of the doughnut"
}
有什么想法吗?
编辑:
我添加了 JS Bin by changing a few lines of this answer.
我会尝试一下。这种方法只是将标签绝对定位在 canvas 之上。唯一的缺点是您必须同时设置 #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>
这个我也试了一下。此方法基于@RYUUSEiiSTAR 的方法和您创建的 link。仍然需要进行正确的计算以使文本居中。
我创建了一个 plunkr 来演示:https://jsfiddle.net/onoc2wmx/(新 Link)。
更新
经过几个小时的黑客攻击,我更新了代码,以便您可以修改字体大小,现在它可以响应了。现在它看起来像这样:
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>
只需调整 bottom
和 font-size
css
上的 %
<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; <<----
}
我正在使用 doughnut chart in Angular Chart. I want to place some text in the center of the doughnut. I've read this question's 个答案,但其中 none 个对我有用,因为我有工具提示,并且出于某种原因,当您将鼠标悬停在图表上时,文本会消失。此外,我需要提供来自 "outside" 的文本 - 自定义文本,例如一个标题。
所以,我的想法是:
var options = {
innerTitle = "This should be placed in the center of the doughnut"
}
有什么想法吗?
编辑: 我添加了 JS Bin by changing a few lines of this answer.
我会尝试一下。这种方法只是将标签绝对定位在 canvas 之上。唯一的缺点是您必须同时设置 #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>
这个我也试了一下。此方法基于@RYUUSEiiSTAR 的方法和您创建的 link。仍然需要进行正确的计算以使文本居中。
我创建了一个 plunkr 来演示:https://jsfiddle.net/onoc2wmx/(新 Link)。
更新
经过几个小时的黑客攻击,我更新了代码,以便您可以修改字体大小,现在它可以响应了。现在它看起来像这样:
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>
只需调整 bottom
和 font-size
css
%
<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; <<----
}