Chartjs 工具提示锚点在条形图上的位置

Question

我有一个使用 Chartjs 的条形图，具有固定的 y 轴最大值。有时数据可能会超过最大值，但悬停工具提示始终固定在条形顶部，因此无法看到。工具提示的 position 选项对我来说真的不起作用。

那么，有没有办法在栏的底部显示工具提示？或者它可以像canvasjs这样跟随悬停的鼠标光标吗？

var ctx = document.getElementById("chart").getContext("2d");
var barChart = new Chart(ctx, {
    type: 'bar',
    options: {
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    min: 0,
                    max: 120
                },
            }],
        },
        tooltips: {
            // position: 'nearest',
            position: 'average',
        },
        legend: {
            display: false
        }
    },
    data: {
        labels: ["A", "B", "C", "D"],
        datasets: [{
            label: "Data Set 1",
            backgroundColor: [
                '#44b2d7',
                '#44b2d7',
                '#44b2d7',
                '#44b2d7',
            ],
            borderColor: [
                '#44b2d7',
                '#44b2d7',
                '#44b2d7',
                '#44b2d7'
            ],
            borderWidth: 0,
            data: [131, 65, 165, 85]
        }]
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" height="180"></canvas>

Answer 1

可以通过向 Chart.Tooltip.positioners 地图添加功能来定义新模式。 您可以像在 chartjs 的 Doc 中一样创建自定义定位：

    Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

    return {
        x: eventPosition.x,
        y: eventPosition.y
    };
}

您需要在渲染图表时将自定义函数设置为您的选项：

tooltips: { 
            position : 'custom',   //<-- important same name as your function above      
            callbacks: {
              label: function(tooltipItem, data) {
               var label = Math.floor(tooltipItem.yLabel*100)/100+" "+data.datasets[tooltipItem.datasetIndex].label;
               return label;
              }
            }
          }

看我完整的Fiddle 示例。