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

Chart.js工具提示在条形图上的锚点位置

1 个答案: