Javascript 将鼠标悬停在chartjs饼图上时，画布填充文本将消失

我正在使用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);
    }
});

这是初始加载后的图表图像

---

这是悬停后的图像

ChartJS将根据需要重新绘制自身（例如，在显示工具提示时），因此每当ChartJS刷新（重新绘制）图表时，您必须重新绘制“%and responses”文本

您可以设置ChartJS的“”回调，以便在ChartJS完成自己的绘制和动画制作后绘制调用“%and responses”文本

[添加：

我已经看了ChartJS源代码和Github上的问题

在工具提示关闭后，ChartJS API中目前无法触发自定义文本（您的“%and responses”）的重画

---

一种解决方法是使用CSS在图表上放置一个带有“%and responses”的div。

实际上，您可以通过对正在使用的图表类型进行简单扩展并将绘图代码移动到绘图覆盖内部来实现这一点

---

预览

---

代码

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"
});

---

---

Fiddle-

我想你可以在你的Chartjs设置中设置

选项：{animation:false}

来解决这个问题。

谢谢。我可能弄错了，但如果您引用我在问题中包含的代码，我想我实际上是在“onAnimationComplete”回调中填充文本。我弄错了吗？抱歉，如果我是，我对js开发非常陌生。@vsank7787。是的，我的错-z您确实在使用onAnimationComplete（我应该滚动您的问题代码才能看到）。@vsank7787，我已经更新了我对（遗憾的）报告的回答，即当前无法在显示工具提示后重新绘制自定义标签。感谢您的广泛研究，我可能会使用CSS with div方法。再次感谢。实际上，您可以通过一个简单的扩展（Chart.js支持）来实现这一点——我们已经为此添加了一个答案。我想除了onAnimationComplete（但前者似乎更干净）

之外，您还可以使用自定义工具提示来完成此操作。extend

看起来是一种在基本

.draw

完成后继承图表并运行代码的好方法。投票给一个好的解决方案，并给我新的信息——我喜欢学习！：-）@马克-我也是，新的chartjs看起来更棒！你能解释一下这段代码到底是怎么回事吗？我在条形图上遇到了同样的问题，但我不知道到底是怎么解决的。@查德尼——你重写绘图方法，先调用原始绘制，然后在中间写文本。它最初正在消失，因为OP在每次绘制后都没有写入文本（仅在第一个动画完成后）