キャンバスにキャンバスを描画すると、マウスがチャートを離れるときにテキストが消去されます

Question

グラフをクリックしたいチャートのChartをチャート上に表示し、グラフの中央にそのセグメントに関する情報を表示します。私はこの作業をしていますが、マウスがチャートセグメントを離れるたびに情報が消えるたびに、別のチャートセグメントがクリックされるまで情報が残るようにします。

私は、チャートの中央にテキストを維持するにはどうすればよい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

代わりにplugin apiを使用してください（Chart.jsによって管理されているように）キャンバスに直接描画しないでください。提供されているフックの1つを使用することができます。例えば、afterDrawは、グラフが描かれた後にあなたのものを描画します。

ワーキングJSFiddle：
https://jsfiddle.net/fa7s5q30/12/