工具提示将Chart.js中的条形图弄乱

Question

我使用chart.js创建堆积条形图，并且我已成功移动并旋转要显示在条形顶部的x轴标签，当我使用鼠标移过酒吧，整个图表出现扭曲。

这是正常的 ，这就是我以后鼠标获得：

这里是代码

这是我用旋转x轴标签：

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

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