Javascript Charts.js工具提示图表上的重叠文本

由于Charts.js还不支持注释，我在绘制图表后添加了数据点的注释。使用ctx.fillText，如下所示

        animation: {
            animateScale: true,
            animateRotate: true,
            onComplete: function () {
                var chartInstance = this.chart,
                    ctx = chartInstance.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.fillStyle = this.chart.config.options.defaultFontColor;
                ctx.textBaseline = 'bottom';

                this.data.datasets.forEach(function (dataset, i) {
                    var meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function (bar, index) {
                        data = dataset.data[index];
                        ctx.fillText(data, bar._model.x, bar._model.y - 5);
                    });
                });
            }
        }

这非常有效，除了现在工具提示显示在新添加的文本下面。这并不是很明显，但是有时它在一个不好的地方重叠，这意味着你看不到后面的工具提示

---

有没有办法设置ctx.fillText或工具提示的z索引，以便我可以正确分层？

对于任何感兴趣的人，我设法弄明白了这一点，最后我查看了charts.js中的工具提示绘图功能，并将其修改版本用作自定义工具提示，从而在添加注释后绘制工具提示

首先将此添加到您的选项中

config = {
    options: {
        tooltips: {
            enabled: false,
            custom: customTooltips
        }

然后调用下面的自定义工具提示函数

var currentX = null;
var currentY = null;

var customTooltips = function (tooltip) {

    var helpers = Chart.helpers;
    var ctx = this._chart.ctx;
    var vm = this._view;

    if (vm == null || ctx == null || helpers == null || vm.opacity === 0) {
        return;
    }

    var tooltipSize = this.getTooltipSize(vm);

    var pt = {
        x: vm.x,
        y: vm.y
    };

    if (currentX == vm.x && currentY == vm.y) {
        return;
    }

    currentX = vm.x;
    currentY = vm.y;

   //  IE11/Edge does not like very small opacities, so snap to 0
    var opacity = Math.abs(vm.opacity < 1e-3) ? 0 : vm.opacity;

    // Draw Background
    var bgColor = helpers.color(vm.backgroundColor);
    ctx.fillStyle = bgColor.alpha(opacity * bgColor.alpha()).rgbString();
    helpers.drawRoundedRectangle(ctx, pt.x, pt.y, tooltipSize.width, tooltipSize.height, vm.cornerRadius);
    ctx.fill();

    // Draw Caret
    this.drawCaret(pt, tooltipSize, opacity);

    // Draw Title, Body, and Footer
    pt.x += vm.xPadding;
    pt.y += vm.yPadding;

    // Titles
    this.drawTitle(pt, vm, ctx, opacity);

    // Body
    this.drawBody(pt, vm, ctx, opacity);

    // Footer
    this.drawFooter(pt, vm, ctx, opacity);
};

var currentX=null；
var currentY=null；
var customTooltips=函数（工具提示）{
var helpers=Chart.helpers；
var ctx=此值。\u chart.ctx；
var vm=此视图；
if（vm==null | | ctx==null | | helpers==null | | vm.opacity==0）{
返回；
}
var tooltipSize=this.getTooltipSize（vm）；
变量pt={
x:vm.x，
y:vm.y
};
if（currentX==vm.x&¤tY==vm.y）{
返回；
}
currentX=vm.x；
电流y=vm.y；
//IE11/Edge不喜欢非常小的不透明度，因此捕捉到0
var opacity=Math.abs（vm.opacity<1e-3）？0:vm.opacity；
//画背景
var bgColor=helpers.color（vm.backgroundColor）；
ctx.fillStyle=bgColor.alpha（不透明度*bgColor.alpha（））.rgbString（）；
drawRoundedRectangle（ctx、pt.x、pt.y、tooltipSize.width、tooltipSize.height、vm.cornerRadius）；
ctx.fill（）；
//画插入符号
this.drawCaret（pt、工具提示大小、不透明度）；
//绘制标题、正文和页脚
pt.x+=vm.xPadding；
pt.y+=vm.yPadding；
//头衔
这个.drawTitle（pt、vm、ctx、不透明度）；
//身体
这是一个绘图体（pt、vm、ctx、不透明度）；
//页脚
这个.drawFooter（pt、vm、ctx、不透明度）；
};

@user3284707实际上，你要做的是在工具提示之前在条的顶部绘制数字，你正在绘制它们，将它们放置在所有东西的顶部

我使用以下方法绘制这些数字：

Chart.plugins.register({
  beforeDraw: function(chartInstance) {
    if (chartInstance.config.options.showDatapoints) {
      var helpers = Chart.helpers;
      var ctx = chartInstance.chart.ctx;
      var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);

      // render the value of the chart above the bar
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      ctx.fillStyle = fontColor;

      chartInstance.data.datasets.forEach(function (dataset) {
        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
          var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
          var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
          var label = dataset.data[i] || '';
          ctx.fillText(label.toLocaleString(), model.x, yPos);
        }
      });
    }
  }
});

Chart.plugins.register({
beforeDraw:函数（chartInstance）{
if（chartInstance.config.options.showDatapoints）{
var helpers=Chart.helpers；
var ctx=chartInstance.chart.ctx；
var fontColor=helpers.getValueOrDefault（chartInstance.config.options.showDatapoints.fontColor、chartInstance.config.options.defaultFontColor）；
//在条形图上方呈现图表的值
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontSize，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
ctx.fillStyle=fontColor；
chartInstance.data.datasets.forEach（函数（数据集）{
对于（var i=0；i=0.93？model.y+20：model.y-5；
var label=dataset.data[i]| |“”；
ctx.fillText（label.tolocalString（），model.x，yPos）；
}
});
}
}
});

注意这里的

beforeDraw

---

希望这对三年后有所帮助，我花了最后30分钟试图解决这个问题如果有人想找到解决这个问题的方法，有一个更简单的方法来实现OP所需要的

---

不要在

onComplete

callback中绘制，而是在

afterDatasetsDraw

callback中绘制它。正在绘制工具提示之前调用它。

如果您正在寻找问题中编写的代码的近似解决方案，那么下面是代码：

让ctx2=document.getElementById（“条形图”）.getContext（“2d”）；
让图表=新图表（ctx2{
类型：'bar'，
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“月”，
数据：['20'，'30'，'10'，'15'，'50'，'35'，'25']，
背景颜色：“rgba（26179148,0.5）”，
边框颜色：“rgba（75192192,1）”，
边框宽度：1
}]
},
选项：{
图例：{
显示：假
},
回答：是的，
维护Aspectratio：是的，
legendCallback:函数（图表）{
var text=[]；
对于（var i=0；Ithank非常感谢您的回答，我偶尔会使用chart.js，虽然主要是转到echarts上，但当我这样做时，我会更详细地查看这个答案。非常感谢您花时间查看。我正试图找到一种方法来更改工具提示z-index，但这解决了我的问题。非常感谢