如何在一切之上渲染Chart.js 2.x工具提示

Question

我正在使用 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 。

Answer 1

忘了更新这篇文章。答案是使用外部（自定义）工具提示。这基本上是渲染HTML元素来创建工具提示。详细了解文档here。