如何在所有内容之上呈现 Chart.js 2.x 工具提示答案

【问题标题】：How to render Chart.js 2.x tooltips on top of everything如何在所有内容之上呈现 Chart.js 2.x 工具提示
【发布时间】：2017-07-31 17:43:32
【问题描述】：

我正在使用 Chart.js 2.6.0，并且我一直在研究一个渲染自定义图形的示例。您可以在 https://jsfiddle.net/arminzia/bm4ezdur/ 观看现场演示。

基本上，我在每个条形图的顶部绘制圆圈来表示值。这是代码：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    responsive: true,
    maintainAspectRatio: false,
    data: {
        labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
        datasets: [{
            data: [16, 87, 56, 35, 88, 60, 12],
            backgroundColor: "#4082c4"
        }]
    },
    options: {
            "hover": {
            "animationDuration": 0
        },
        "animation": {
            "duration": 1,
                        "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.textBaseline = 'bottom';

                            this.data.datasets.forEach(function (dataset, i) {
                                var meta = chartInstance.controller.getDatasetMeta(i);
                                meta.data.forEach(function (bar, index) {
                                    var data = dataset.data[index] + '$';                            

                  var centerX = bar._model.x;
                  var centerY = bar._model.y - 10;
                  var radius = 22;

                  ctx.beginPath();
                  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                  ctx.fillStyle = 'white';
                  ctx.fill();
                  ctx.lineWidth = 1;
                  ctx.strokeStyle = '#4082c4';
                  ctx.stroke();

                  ctx.fillStyle = '#4082c4';
                  ctx.font = "bold 14px Calibri";
                  ctx.fillText(data, bar._model.x, bar._model.y);
                                });
                            });
                        }
        },
            legend: {
            "display": false
        },
        tooltips: {
            "enabled": true
         },
        scales: {
            yAxes: [{
                    display: true,
                    gridLines: {
                    display : true
                },
                ticks: {
                        display: true,
                    beginAtZero:true,
                    max: 140
                }
            }],
            xAxes: [{
                    barThickness: 40,
                    gridLines: {
                    display : false
                },
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

现在的问题是，工具提示被隐藏在这些圆圈下。我已经为此苦苦挣扎了太久，并且没有从文档中找到任何解决方案或任何有用的东西。

如何强制在这些圆圈顶部呈现工具提示？实际上，最重要的是，像 z-index: 1000.

【问题讨论】：

问题似乎是在启用工具提示时，每次将鼠标悬停在画布上时，都会再次触发动画功能。我通过向动画onComplete 添加警报来测试这一点。使用tooltips: { enabled : true }，每次悬停都会触发警报。当我将其更改为tooltips: false 时，警报只触发了一次。
@TotZam 正确。但如果我禁用工具提示，则不会显示任何内容。我需要在点击/触摸事件上显示工具提示，不需要悬停。但同样，它们应该呈现在我的画布渲染之上。

标签： chart.js chart.js2

【解决方案1】：

忘记更新这篇文章了。答案是使用外部（自定义）工具提示。这基本上是渲染 HTML 元素以创建工具提示。阅读更多关于文档here。

【讨论】：