chartjs 自动显示工具提示

Question

我创建天气图表。我想在创建图表时自动显示最后一个数据点的工具提示。当鼠标移动到另一个数据点时，提示应移动到鼠标的新数据点，如果鼠标位于外部，则提示应消失。

https://www.chartjs.org/docs/3.8.0/samples/advanced/programmatic-events.html非常接近。谢谢！

function triggerTooltip(chart) {
const tooltip = chart.tooltip; 
if (tooltip.getActiveElements().length > 0) 
  { tooltip.setActiveElements([], {x: 0, y: 0}); } 
  else { 
   const chartArea = chart.chartArea; 
   tooltip.setActiveElements([
      {
        datasetIndex: 0,
        index: 0,
      }, {
        datasetIndex: 1,
        index: 0,
      }], 
     { x: (chartArea.left + chartArea.right) / 2, 
       y: (chartArea.top + chartArea.bottom) / 2, }); 
    } 
chart.update(); } 

我确实希望索引控制工具提示的栏。但无论设置什么索引，都没有什么区别。 另外，当我更改 x,y 时，它仍然位于同一位置（靠近第三条）。 在此输入图片描述

Answer 1

这可以通过 afterDatasetUpdate 挂钩中的

Plugin Core API

来完成，如下所示：

afterDatasetUpdate: chart => {
  if (!chart.tooltip.getActiveElements().length) {
    chart.tooltip.setActiveElements([{
      datasetIndex: 0,
      index: chart.data.datasets[0].data.length - 1
    }]);
    chart.update();
  }
} 

请查看下面的可运行代码片段，看看它是如何工作的。

new Chart('myChart', {
  type: 'line',
  plugins: [{
    afterDatasetUpdate: chart => {
      if (!chart.tooltip.getActiveElements().length) {
        chart.tooltip.setActiveElements([{
          datasetIndex: 0,
          index: chart.data.datasets[0].data.length - 1
        }]);
        chart.update();
      }
    }
  }],
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: '# of Events',
      data: [65, 59, 80, 81, 56, 55, 68],
      borderColor: '#a00'
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="myChart" width="400" height="95"></canvas>