canvas 将鼠标悬停在 chartjs 饼图上时填充文本消失

Question

我正在使用来自 chartjs 的圆环图，在这个 canvas 的中心我填充了两行文本。这些在初始动画后显示良好，但当我将鼠标悬停在甜甜圈上时，会显示相关元素的工具提示（这是预期的），但填充文本消失了。发生这种情况的任何原因以及我如何纠正它？

这是我用来在 canvas

上生成文本的代码

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 会根据需要自行重绘（例如显示工具提示时），因此您必须在 ChartJS 刷新（重绘）图表时重绘“% 和响应”文本。

~~您可以设置 ChartJS 的“onAnimationComplete”回调，以便在 ChartJs 完成它自己的绘图和动画时绘制您的调用“% 和响应”文本。~~

[加法：]

我查看了 ChartJS 源代码和 Github 上的问题。

目前在 ChartJS API 中无法在工具提示关闭后触发自定义文本（您的“% 和响应”）的重绘。

一种解决方法是使用 CSS 在图表上放置一个 div 以及您的“% 和响应”。

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

Fiddle - http://jsfiddle.net/p979zyLj/

Answer 3

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

canvas 将鼠标悬停在 chartjs 饼图上时填充文本消失

canvas fill text vanishes when hovering over chartjs pie chart

javascript

charts

canvas

chart.js