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

Question

我试图将自定义Chart.js工具提示放置在两个小节的中间。我对chart.js文档和不同的文章进行了研究，但没有找到与使用以下代码段定位不同的方法（我使用的是jquery并做了一个toggle类来隐藏/显示工具提示，请重点关注我用来放置工具提示的值）：

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

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

[

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

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

谢谢！

Answer 1

您未指定x轴和/或y轴上的“中间”是指。但是自从你写了：

  

...在两个小节的中间...

我想你的意思是在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，因为这样可以更快，更轻松地为您提供帮助。