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设置为 class MySingleton { private static MySingleton mInstance; private static RequestQueue requestQueue; private Context context; private MySingleton(Context ctx) { context = ctx; requestQueue = getRequestQueue(); } private RequestQueue getRequestQueue() { if(requestQueue==null) { requestQueue = Volley.newRequestQueue(context.getApplicationContext()); } return requestQueue; } static synchronized MySingleton getInstance(Context con){ if(mInstance==null) { mInstance = new MySingleton(con); } return mInstance; } <T>void addtoRQ(Request<T> request) { requestQueue.add(request); } ，当悬停在图表上时。

要获得正确的行为，您需要在绘制文本之前将文本的基线设置为 top ，例如：

alphabetic

这是working example。

Angular应用程序中的Chartjs插件标签在悬停时意外移动

1 个答案: