У меня есть приложение angular, показывающее гистограмму с использованием 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>