3

我想知道是否有人遇到过类似的情况。我正在使用 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/

4

1 回答 1

5

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

发生这种情况的原因是工具提示正在使用不同的 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);

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

于 2017-06-08T10:56:45.143 回答