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中创建自定义的postitioning：

    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例子。