将鼠标悬停在chartjs饼图

Question

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

这是初始加载

后图表的图像

这是悬停

后的图片

Answer 1

ChartJS会根据需要重绘自己（例如显示工具提示时），因此您必须重新绘制＆＃34;％和响应＆＃34; ChartJS刷新（重绘）图表时的文本。

您可以设置ChartJS＆＃39; onAnimationComplete＆＃39;回拨以将您的电话与您的电话联系起来＆＃34;％和响应＆＃34; ChartJs完成它自己的绘图和动画时的文本。

[补充：]

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

在工具提示关闭后，ChartJS API中目前无法触发重新绘制自定义文本（＆＃34;％和响应＆＃34;）。

一种解决方法是使用CSS将div放在＆＃34;％和响应＆＃34;在图表上。

Answer 2

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

预览

<强>代码

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/

Answer 3

我认为您可以在Chartjs设置上设置option: {animation: false}来解决此问题。