График диаграммы диаграммы 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

Я потратил немного времени на это и решил проблему.

То, что я собрал из изучения расширения ...

я переместил функцию onAnimationComplete в .extend:

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/