如何在所有内容之上渲染图表.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元素以创建工具提示。在此处阅读有关文档的更多信息。