chart.js：将堆叠条形图的工具提示放置在条形图的顶部

Question

当我在简单的条形图中有一个条形时，工具提示将位于条形图的顶部：

如果将鼠标悬停在堆积的条形图上，则工具提示将置于average位置：

代替这种行为，我想将工具提示始终放在堆叠条形图的顶部（就像简单条形图一样）。 配置位置的唯一两个选项是average和nearest （ https://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes ）。

我知道有提到使用Chart.Tooltip.positioners.custom ，但是一方面，这将覆盖所有图表的行为（但我只需要用于堆叠的条形图），另一方面，即使我可以使用我不知道如何获取或计算图表栏的顶部位置。

因此，有没有办法将工具提示放置在堆叠的条形上方？ 谢谢！

Answer 1

谢谢您的回复，我找到了一种方法，但是它是一种破解，可能对您不起作用。 考虑以下：

 //register custom positioner Chart.Tooltip.positioners.custom = function(elements, position) { //debugger; return { x: position.x, y: elements[0]._view.base - (elements[0].height() + elements[1].height()) } } //Individual chart config var ctx = "myChart"; var myChart = new Chart(ctx, { type: 'bar', options: { title: { display: true, text: 'Precision-Recall Curve', }, layout: { padding: 32 }, tooltips: { mode: 'index', intersect: true, position: 'custom', yAlign: 'bottom' }, scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } }, data: { labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'], datasets: [{ label: 'data1', data: [5, 56, 90, 6, 42, 67, 32, 24, 20, 18, 56], borderColor: '#1acc1c', backgroundColor: 'rgba(26, 10, 55, .1)', pointBorderColor: "#4Bd1C0", pointBackgroundColor: "#fff", pointHitRadius: 10 }, { label: 'data2', data: [2, 12, 24, 30, 39, 58, 10, 82, 34, 89, 5], borderColor: '#34315a', backgroundColor: 'rgba(132, 2, 34, .7)', pointBorderColor: "#34495e", pointBackgroundColor: "#fff", pointHitRadius: 10 }] } }); 

 <div class="container"> <div> <canvas id="myChart"></canvas> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>