Chart.js如何显示传奇悬停的工具提示

Question

当相应的传奇密钥悬停时，我正在尝试显示带有图数据（标签和Y值）的工具提示。我只能找到适用于Chart.js旧版本的解决方案，我正在使用3.8.0。

Answer 1

这可以通过定义a /code> 函数如下：

legend: {
  onHover: (evt, legendItem) => {
    const activeElement = {
      datasetIndex: 0,
      index: legendItem.index
    };
    chart.tooltip.setActiveElements([activeElement]);
    chart.update();
  }
}

请查看下面可运行的代码，并查看其工作原理。

const chart = new Chart('chart', {
  type: 'doughnut',
  data: {
    labels: ['One', 'Two', 'Three'],
    datasets: [{
      data: [4, 5, 3],
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(54, 162, 235, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(54, 162, 235)'],
      hoverBackgroundColor: ['rgba(255, 99, 132, 0.4)', 'rgba(255, 159, 64, 0.4)', 'rgba(54, 162, 235, 0.4)'],
      borderWidth: 1,
      hoverBorderWidth: 3
    }]
  },
  options: {
    plugins: {
      legend: {
        onHover: (evt, legendItem) => {
          const activeElement = {
            datasetIndex: 0,
            index: legendItem.index
          };
          chart.setActiveElements([activeElement]); // to also show thick border
          chart.tooltip.setActiveElements([activeElement]);
          chart.update();
        }
      }
    }
  }
});

canvas {
  max-height: 200px;
}

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