我正在使用来自 Chartjs 的圆环图,并在画布的中心填充两行文本。这些在初始动画后显示得很好,但是当我将鼠标悬停在甜甜圈上时,会显示相关元素的工具提示(这是预期的),但填充文本消失。发生这种情况的任何原因以及我该如何纠正它?
这是我用来在画布上生成文本的代码
var pieChart = document.getElementById("pieChart").getContext("2d");
new Chart(pieChart).Doughnut(pieData, {percentageInnerCutout : 80, animationEasing: "easeOutQuart", onAnimationComplete: function() {
pieChart.fillStyle = 'black'
pieChart.font = "50px Roboto";
pieChart.textAlign = "center";
pieChart.fillText(distributionChartData[3]+" %", 135, 120);
pieChart.font = "20px Roboto";
pieChart.fillText((distributionChartData[0]+distributionChartData[1]+distributionChartData[2])+" Responses", 135, 160);
}
});
Here is an image of the chart after initial load
this is the image after hover
实际上,您可以通过简单扩展您正在使用的图表类型并将绘制代码移至绘制覆盖内部来实现此目的
Preview
Code
Chart.types.Doughnut.extend({
name: "DoughnutAlt",
draw: function () {
Chart.types.Doughnut.prototype.draw.apply(this, arguments);
this.chart.ctx.textBaseline = "middle";
this.chart.ctx.fillStyle = 'black'
this.chart.ctx.font = "50px Roboto";
this.chart.ctx.textAlign = "center";
this.chart.ctx.fillText(distributionChartData[3] + " %", 135, 120);
this.chart.ctx.font = "20px Roboto";
this.chart.ctx.fillText((distributionChartData[0] + distributionChartData[1] + distributionChartData[2]) + " Responses", 135, 160);
}
});
var pieChart = document.getElementById("pieChart").getContext("2d");
new Chart(pieChart).DoughnutAlt(pieData, {
percentageInnerCutout: 80, animationEasing: "easeOutQuart"
});
小提琴 -http://jsfiddle.net/p979zyLj/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)