由于图例未显示而生成工具提示时,chart.js filltext对象已移动

Question

我想知道是否有人遇到过类似的情况.我正在使用Chart.js来创建条形图.条形图组件的一个要求是在条形图上显示条形数据值.我创建了一个简单的插件,它可以正常工作,直到我发现显示错误.

当鼠标悬停在任何条形图上并显示工具提示时,条形数据值会略微下降.我不确定发生了什么.似乎工具提示在某种程度上在图表中添加了某种空间.

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

以下是为添加条形数据值而创建的插件:

  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

我遇到了同样的问题,并在存储库上发布了一个问题.这是回复:

发生这种情况的原因是工具提示使用不同的textBaseline绘制文本.小提琴中的插件没有设置它,所以它将是它最后的东西.

我会更改您的插件以获得以下内容

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);

我在小提琴上尝试过它现在可以了!