Chart.js工具提示在條形圖上的錨點位置

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;
              }
            }
          }

看我完整的小提琴例子。