在鼠标离开图表时画到画布点击清除文字

问题描述：

我有一个ChartJS圆环图，我想点击一个细分，并在图表中心显示细分信息。我有这个工作，但是无论何时鼠标离开图表段信息消失，我希望它留下，直到另一个图表段被点击。在鼠标离开图表时画到画布点击清除文字

我已经把这个基本的例子在JSFIDDLE

canvas.onclick = function(evt) { 
    var activePoints = donut.getElementsAtEvent(evt); 
    if(activePoints[0]) { 
     var chartData = activePoints[0]['_chart'].config.data; 
     var idx = activePoints[0]['_index']; 
     var label = chartData.labels[idx].toUpperCase(); 

     ctx.font = "bold 18px Verdana, Arial, sans-serif"; 
     var textWidth = ctx.measureText(label).width; 

     ctx.fillStyle = "#000"; 
     ctx.fillText(label, (250/2) - (textWidth/2), (250/2)); 
    } 
};

我如何能保持在图表的中央的文字？

答

不要直接绘制到画布上（因为它由Chart.js管理），请改为使用plugin api。您可以使用提供的钩子之一 - 例如afterDraw在绘制图表后画出您的东西。

工作的jsfiddle：
https://jsfiddle.net/fa7s5q30/12/

你可以得到的工作的jsfiddle？我试过了，没有什么不同（https://jsfiddle.net/fa7s5q30/7/）。将所有代码移动到'afterDraw'后给出https://jsfiddle.net/fa7s5q30/8/。 – anothershrubery

当然，我已经更新了我的答案。每次图表重新绘制（这也是鼠标移动）时调用'afterDraw'，因此您需要将选定的标签存储在某处，否则它将被清除。我选择将它附加到图表实例。 –

这在Chrome中非常适用，但不会在IE11中显示图表。不要在调试器中标记任何问题。任何方式呢？ – anothershrubery

在鼠标离开图表时画到画布点击清除文字

相关推荐