当悬停在chartjs饼图上时，canvas填充文本消失 [英] canvas fill text vanishes when hovering over chartjs pie chart

问题描述

我使用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）; 
} 
} 
  

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

解决方案

实际上，你可以用一个简单的扩展，你正在使用的图表类型，并将你的绘制代码移动到绘制重写内。

---

预览

---

代码

  Chart.types.Doughnut.extend（{
 name：DoughnutAlt，
 draw：function（）{
 Chart.types.Doughnut.prototype.draw.apply ，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/

I am using a doughnut chart from chartjs, and in the center of this canvas I am filling two lines of text. These show up fine after the initial animation, but when I hover over the doughnut, a tool tip shows up for the relevant element (which is expected), but the fill text vanishes. Any reason why this might be happening and how I can rectify it ?

here is the code I am using to generate the text on the 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);
    }
});

Here is an image of the chart after initial load

this is the image after hover

解决方案

Actually you can do this with a simple extension of the chart type you are using and moving your draw code to inside the draw override

---

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

---

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

这篇关于当悬停在chartjs饼图上时，canvas填充文本消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！