Chart.js棒グラフのラベルがホバーで非表示になる

Question

棒グラフの各棒には、カスタムポップアップが表示されています。問題は、バーが上に乗ると、すべてのラベルが消えてしまうことです。 http://jsfiddle.net/s8yfqvdc/9/

私はドキュメントの中で私を助けてくれるものはありません。

var context = document.getElementById('serviceLife').getContext('2d'); 

window.myObjBar2 = new Chart(context).Bar(barChartData2, { 
    scaleOverride: true, 
    scaleSteps: 10, 
    scaleStepWidth: 10, 
    scaleStartValue: 0, 
    barShowStroke: false, 
    barStrokeWidth: 0, 
    barValueSpacing: 2, 
    animation: false, 
    responsive: true, 
    tooltipTemplate: "<%if (label){%><%=label.tooltip%><%}%>", 
    maintainAspectRatio: true, 
    onAnimationComplete: function() { 

     var ctx = this.chart.ctx; 
     ctx.font = this.scale.font; 
     ctx.fillStyle = this.scale.textColor 
     ctx.textAlign = "center"; 
     ctx.textBaseline = "bottom"; 

     this.datasets.forEach(function (dataset) { 
      dataset.bars.forEach(function (bar) { 
       ctx.fillText(bar.value, bar.x, bar.y - 5); 
      }); 
     }) 
    } 
}); 

Answer 1

これはChart.jsの既知の問題のようですので、あなたはおそらく、簡単な拡張機能を作成する必要があります：see this answer。

Answer 2

私はこれに少し時間を費やして問題を解決しました。

Chart.types.Bar.extend({ 
    name: "BarAlt", 
    draw: function() { 
    Chart.types.Bar.prototype.draw.apply(this, arguments); 
      var ctx = this.chart.ctx; 
     ctx.font = this.scale.font; 
     ctx.fillStyle = this.scale.textColor 
     ctx.textAlign = "center"; 
     ctx.textBaseline = "bottom"; 

     this.datasets.forEach(function (dataset) { 
      dataset.bars.forEach(function (bar) { 
       ctx.fillText(bar.value, bar.x, bar.y - 5); 
      }); 
     }) 
    } 
}); 

http://jsfiddle.net/s8yfqvdc/10/