chart.js：将堆叠条形图的工具提示放置在条形图的顶部

Question

当我在简单的条形图中有一个条形时，工具提示将位于条形图的顶部：

如果我将鼠标悬停在堆积的条形图上，则工具提示将放置在_scrollController = ScrollController()..addListener(_scroll); void _scroll() { print('scrolled ${_scrollController.offset} from {??}'); } 位置：

我希望将工具提示始终放在堆叠条形图的顶部（而不是简单条形图），而不是这种行为。 配置位置的唯一两个选项是average和average（https://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes）。

我知道有使用nearest的方法，但是一方面这会覆盖所有图表的行为（但我只需要使用堆积的条形图），另一方面，即使我可能会使用我不知道如何获取或计算图表栏顶部位置的线索。

那么，有没有办法将工具提示放置在堆叠的条形上方？谢谢！

Answer 1

感谢您的回复，我找到了一种方法，但它确实是一种破解，可能对您不起作用。考虑以下几点：

//register custom positioner
Chart.Tooltip.positioners.custom = function(elements, position) {
  //debugger;
  return {
    x: position.x,
    y: elements[0]._view.base - (elements[0].height() + elements[1].height())
  }
}


//Individual chart config
var ctx = "myChart";
var myChart = new Chart(ctx, {
  type: 'bar',
  options: {
    title: {
      display: true,
      text: 'Precision-Recall Curve',
    },
    layout: {
      padding: 32
    },
    tooltips: {
      mode: 'index',
      intersect: true,
      position: 'custom',
      yAlign: 'bottom'
    },
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  },
  data: {
    labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
    datasets: [{
      label: 'data1',
      data: [5, 56, 90, 6, 42, 67, 32, 24, 20, 18, 56],
      borderColor: '#1acc1c',
      backgroundColor: 'rgba(26, 10, 55, .1)',
      pointBorderColor: "#4Bd1C0",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }, {
      label: 'data2',
      data: [2, 12, 24, 30, 39, 58, 10, 82, 34, 89, 5],
      borderColor: '#34315a',
      backgroundColor: 'rgba(132, 2, 34, .7)',
      pointBorderColor: "#34495e",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }]
  }
});

<div class="container">
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>