chart.js 由于图例未显示，生成工具提示时移动了填充文本对象

Question

我想知道是否有人运行遇到过类似的情况。我正在使用 Chart.js 创建条形图。条形图组件的要求之一是在条形图本身上显示条形图数据值。我创建了一个简单的插件来执行此操作，并且在我发现显示错误之前它工作正常。

将鼠标悬停在任何条形图上并显示工具提示时，条形图数据值被下推了一点。我不确定发生了什么。似乎工具提示以某种方式在图表中添加了某种 space。

有没有人经历过类似的行为？

下面是为添加条数据值而创建的插件：

  Chart.pluginService.register({
afterDraw : function (chart ,easingValue, options) {
  var configOptions = chart.config.options;
  if (configOptions.barValueDisplay){
    var ctx = chart.chart.ctx;
    var scales = chart.scales;
    var datasets = chart.config.data.datasets;

    for(var i = 0; i< datasets.length; i++){
      var meta = chart.getDatasetMeta(i);
      var elements = meta.data
      var yScale = scales['y-axis-0'];
      for (var j = 0; j < elements.length; j++) {
        var view = elements[j]._view;

        var text = configOptions.barGoals ? datasets[i].rawData[j] :datasets[i].data[j];
        var textWidth = ctx.measureText(text).width
        var x = view.x - textWidth / 2;
        var y = yScale.bottom-15;
        ctx.save();
        ctx.fillStyle = configOptions.barValueDisplay.color;
        ctx.fillText(text, x, y);
        ctx.restore();
      }
    }
  }
}});

更新：创建 JSFiddler 示例后，我意识到此行为与图例不显示有关。

那么，有什么想法可以在不显示图例的情况下解决这个问题吗？谢谢

https://jsfiddle.net/charleschiu/9fc8n7cb/29/

Answer 1

我遇到了同样的问题并在存储库上发布了一个问题。回复如下：

The reason this is happening is that the tooltip is drawing text using a different textBaseline. The plugin in your fiddle doesn't set it so it will be whatever it last was.

I would change your plugin to have the following
var text = 'test';
var x = view.x;
var y = yScale.bottom;
ctx.textBaseline = 'top';
ctx.textAlign = 'center';
ctx.fillStyle = 'rgba(255, 0, 255, 1)';
ctx.fillText(text, x, y);

我在 Fiddle 上试过了，现在可以用了！

chart.js 由于图例未显示，生成工具提示时移动了填充文本对象

chart.js filltext object moved when tooltip is generated because of legend not displaying

plugins

tooltip

chart.js

ng2-charts