角度アプリケーションのChartjsプラグインラベルが、ホバーで予期せず動く

Question

Chartjsとangular-chartディレクティブを使用して棒グラフを表示する角型アプリがあります。

棒グラフに適用されたChartjsプラグインを使用して、上にラベルが付いた水平線を追加しました。

それはラベルと水平線との間のスペースで、次のように表示されます

しかし、私は、チャートのバーの一つの上にマウスを移動した後、ラベルはにいくつかのピクセルが近づきますライン：

私は理由を見つけることができません。ここで問題が再現される：http://codepen.io/neptune01/pen/JWEeOZ

やコード：興味がある人々のための

//angular app ---------------------------------------------------------- 

angular.module('app', ['chart.js']) 
.controller('BarCtrl', ['$scope', 
    function ($scope) { 

    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
    $scope.series = ['Series A']; 

    $scope.data = [ 
    [65, 59, 80, 81, 56, 55, 40] 
    ]; 

    $scope.options = { 
       horizontalLine: [{ 
        "y": 60, 
        "style": "rgba(255,102,102,0.4)", 
        "text": "Horizontal line" 
       }] 
      } 
}]); 

//horizontal line extension for chart.js ------------------------------ 
var horizonalLinePlugin = { 
    afterDraw: function(chartInstance) { 

    var yScale = chartInstance.scales["y-axis-0"]; 
    var canvas = chartInstance.chart; 
    var ctx = canvas.ctx; 
    var index; 
    var line; 
    var style; 
    var labelSize; 

    if (chartInstance.options.horizontalLine) { 
     for (index = 0; index < chartInstance.options.horizontalLine.length; index++) { 
     line = chartInstance.options.horizontalLine[index]; 

     if (!line.style) { 
      style = "rgba(169,169,169, .6)"; 
     } else { 
      style = line.style; 
     } 

     if (line.y) { 
      yValue = yScale.getPixelForValue(line.y); 
     } else { 
      yValue = 0; 
     } 

     ctx.lineWidth = 3; 

     if (yValue) { 
      ctx.beginPath(); 
      ctx.moveTo(yScale.width, yValue); 
      ctx.lineTo(canvas.width, yValue); 
      ctx.strokeStyle = style; 
      ctx.stroke(); 
     } 

      if (chartInstance.options.scales.yAxes[0].ticks.fontSize != undefined){ 
       labelSize = parseInt(chartInstance.options.scales.yAxes[0].ticks.fontSize); 
      } else { 
       labelSize = parseInt(chartInstance.config.options.defaultFontSize); 
      } 

     if (line.text) { 
      ctx.fillStyle = style; 
      ctx.fillText(line.text, yScale.width, yValue-labelSize-4); 
     } 
     } 
     return; 
    }; 
    } 
}; 
Chart.pluginService.register(horizonalLinePlugin); 

<div ng-app="app"> 
    <div style="width:500px; height:300px;" ng-controller="BarCtrl"> 

<canvas id="bar" class="chart chart-bar" 
    chart-data="data" chart-labels="labels" chart-series="series" chart-options="options"> 
    </canvas> 
</div> 
    </div> 

Answer 1

-

これはChartJSはにtext­'s baselineを設定、という事実によるもので何が起こっていますtopデフォルトでは、グラフの上にマウスを置いたときに表示されます。

正しい動作を取得するには、例えば、テキストを描画する前にalphabeticにテキストのベースラインを設定する必要があります。

... 
ctx.textBaseline = 'alphabetic'; 
ctx.fillText(text, x, y); 
... 

ここworking exampleです。