[英]Chart.js onAnimationComplete doesn't work
我想寫甜甜圈圖表的文本中心。 我在下面寫了這段代碼
<script>
$(document).ready(function () {
var data = {
labels: [
""
],
datasets: [
{
data: [165],
backgroundColor: [
"#FF6384"
],
hoverBackgroundColor: [
"#FF6384"
]
}]
};
var ctx = $('#chart-area').get(0).getContext("2d");
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
animation: true,
responsive: true,
showTooltips: false,
percentageInnerCutout: 70,
segmentShowStroke: false,
onAnimationComplete: function () {
var canvasWidthvar = $('#chart-area').width();
var canvasHeight = $('#chart-area').height();
var constant = 114;
var fontsize = (canvasHeight / constant).toFixed(2);
//ctx.font="2.8em Verdana";
ctx.font = fontsize + "em Verdana";
ctx.textBaseline = "middle";
var total = 0;
$.each(data, function () {
total += parseInt(this.value, 10);
});
var tpercentage = ((data[0].value / total) * 100).toFixed(2) + "%";
console.log(total);
var textWidth = ctx.measureText(tpercentage).width;
var txtPosx = Math.round((canvasWidthvar - textWidth) / 2);
ctx.fillText(tpercentage, txtPosx, canvasHeight / 2);
}
});
});
我想在動畫完成后使用onAnimationComplete函數但是onAnimationComplete函數在這里不起作用。
面臨同樣的問題。 改為使用options.animation中的 onComplete() :
options:{
animation:{
onComplete : function(){
/*Your code here*/
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.