在鼠標離開圖表時畫到畫布點擊清除文字

Question

我有一個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)); 
    } 
}; 

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

Answer 1

不要直接繪製到畫布上（因爲它由Chart.js管理），請改爲使用plugin api。您可以使用提供的鉤子之一 - 例如afterDraw在繪製圖表後畫出您的東西。

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