ツールチップがChart.jsの棒グラフを台無しにする

Question

chart.jsを使用して積重ね棒グラフを作成していますが、マウスを使用すると棒の上に表示されるようにx軸ラベルを移動して回転させている間にバーを移動すると、グラフ全体が歪んで表示されます。

これは正常 であり、これは私が上にマウスの後に何を得るされています

https://jsfiddle.net/staverist/zhocr17t/96/

：

ここにコード

これは私がx軸ラベルを回転させるために使用するものではあり

animation: { 
         duration: 1, 
         onComplete: function() { 
         var chartInstance = this.chart; 
          var ctx = chartInstance.ctx; 
          ctx.textAlign = "left"; 
          ctx.font = "bold 10px Arial"; 
          ctx.fillStyle = "black";        
          Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) { 
            var meta = chartInstance.controller.getDatasetMeta(i); 
            Chart.helpers.each(meta.data.forEach(function (bar, index) { 
              ctx.save(); 
              // Translate 0,0 to the point you want the text 
              ctx.translate(bar._model.x, bar._model.y - 30); 
             // Rotate context by -90 degrees 
             ctx.rotate(-0.5 * Math.PI); 
                // Draw text 
           //ctx.fillText(value,0,0); 
           if(bar._datasetIndex==0){    
           ctx.fillText(bar._model.label, 0, 0); 
              ctx.restore(); 
           } 
            }),this) 
          }),this); 
        } 

Answer 1

これはあなたがrではないためですそれを回転させた後のキャンバスの状態を保存します。代わりにif文の中にそれを復元するの、あなたがそうのように、外にそれを復元する必要があります。また、

... 
if (bar._datasetIndex == 0) { 
    ctx.fillText(bar._model.label, 0, 0); 
} 
ctx.restore(); //<- restore canvas state 
... 

、あなたはより良い代わりにアニメーションを完全にラベルを描画する、（ラベルのちらつきを防ぐために）pluginを作成する必要があります。

ここにはworking example on JSFiddle