將鼠標懸停在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將根據需要重繪自身（例如，在顯示工具提示時），因此，每當ChartJS刷新（重繪）圖表時，您都必須重繪“％和響應”文本。

您可以設置ChartJS的' onAnimationComplete '回調，以在ChartJs完成其自己的繪制和動畫處理后繪制您的“％and response”文本。

[加法：]

我看過ChartJS源代碼和Github上的Issues。

在關閉工具提示后，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"
});

---

小提琴-http: //jsfiddle.net/p979zyLj/

Answer 3

我認為您可以在Chartjs設置中設置option: {animation: false}來解決此問題。