将工具提示放在两个条的中间

Question

我正在尝试将自定义 Chart.js 工具提示放在两个栏的中间。我对 chart.js 文档和不同的帖子进行了研究，但没有找到与使用以下代码段定位它不同的方法（我正在使用 jquery 并切换 class 到hide/show 工具提示，请关注我用来定位工具提示的值):

function setupTooltipPosition(config) {
  const { tooltipElement, tooltipModel } = config;
  const leftOffset = this._chart.canvas.offsetLeft;
  const topOffset = this._chart.canvas.offsetTop;

  tooltipElement.removeClass(tooltipSelectors.hide);
  tooltipElement.css('left', `${tooltipModel.caretX - leftOffset}px`);
  tooltipElement.css('top', `${tooltipModel.carteY - topOffset}px`);
}

在这个特殊情况下使用这种方法我得到了这个结果：

[

我也尝试使用 tooltipModel 的 x 和 y 值，但是，它并没有增加如何将工具提示放在中间的感觉。如果您尝试添加自定义偏移量以将其放在中间，它仅适用于这种情况，但是当您添加更多数据时它不起作用。我最多可以有 2 个数据集，但是，用户最多可以添加 10 个数据值，这意味着 10 组条形图。

问题是：有一种方法可以使用 Chart.js 提供的值将工具提示放在一组条形图（或单个条形图，以防用户只有一个数据集）的中间工具提示？或者在其他情况下，您是否知道任何使此工具提示居中的自定义方法？

谢谢！！

Answer 1

您没有指定 'middle' 是否表示在 x- and/or y 轴上。但是既然你写道：

...on the middle of two bars...

我假设你的意思是在 x 轴上。在这种情况下，您需要将 options.tooltips.mode 属性设置为 index。下面是一个工作示例。

let myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['x', 'y', 'z'],
    datasets: [{
      label: '1993',
      data: [50, 30, 65],
      backgroundColor: '#503291'
    }, {
      label: '1994',
      data: [60, 15, 65],
      backgroundColor: '#1bbecd'
    }]
  },
  options: {
    tooltips: {
      mode: 'index'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        barPercentage: 1
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

对于以后的问题，请提供 MCVE，这样可以更快更轻松地为您提供帮助。

将工具提示放在两个条的中间

Put tooltip on the middle of two bars

chart.js

chartjs-2.6.0