如何在chart.js中的图例项上显示工具提示

Question

我试图找到当用户将图例悬停在 Chart.js 库中时如何显示工具提示的方式。我发现了几个问题，但没有一个得到解决。

https://github.com/chartjs/Chart.js/issues/4023 Chart.js - 悬停在图例上时显示工具提示

有人知道如何管理吗？谢谢

Answer 1

使用onHover回调非常简单。

下面是一个带有粗略实现的片段，但它说明了所需的技术。

let hovering = false,
  tooltip = document.getElementById("tooltip"),
  tooltips = ["such tooltip", "blah blah"],
  mychart = new Chart(document.getElementById("chart"), {
    type: "bar",
    data: {
      labels: ['a', 'b', 'c'],
      datasets: [{
        label: "series 1",
        data: [1, 2, 3]
      }, {
        label: "series 2",
        data: [1, 2, 3]
      }]
    },
    options: {
      legend: {
        onHover: function(event, legendItem) {
          if (hovering) {
            return;
          }
          hovering = true;
          tooltip.innerHTML = tooltips[legendItem.datasetIndex];
          tooltip.style.left = event.x + "px";
          tooltip.style.top = event.y + "px";
        },
        onLeave: function() {
          hovering = false;
          tooltip.innerHTML = "";
        }
      }
    }
  });

#tooltip {
  background-color: #000;
  color: #fff;
  position: absolute;
}

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