图表js工具提示位置在图表上方

Question

有没有一种方法可以将工具提示放置在图表的顶部，所以当我在移动设备上显示工具提示时，我的工具提示不会轻易重叠图表。

我正在使用Vue图表。

提前致谢。

Answer 1

您可以定义自定义定位图。

http://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes

Answer 2

好吧，我有一个类似的问题。

我用vue。 将示例栏导入为图表后，您可以像在chartjs的文档中那样创建自定义位置：

<script>
import { Bar } from "vue-chartjs";
Chart.Tooltip.positioners.custom = function(elements, eventPosition) { //<-- custom is now the new option for the tooltip position
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

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

例如，这会将工具提示的位置设置为事件（鼠标）位置。 渲染图表时，请不要忘记将自定义函数设置为选项：

export default {
  extends: Bar, ...
.
.
.
this.renderChart(
    { labels: this.labels, datasets: this.datasets },
    { ...
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;
              }
            }
          }