Question

我正在尝试找到一种方法，当用户将指针悬停在Chart.js库中时，如何显示工具提示。我发现了几个问题，但都没有解决。

https://github.com/chartjs/Chart.js/issues/4023 Chart.js - show tooltip when hovering on legend

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

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>

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

1 个答案: