在图例悬停上突出显示线系列

Question

真的很喜欢chart.js，但我正在努力创建自定义事件（不是太有经验所以还在学习）

我试图在图例工具提示悬停时突出显示完整的线条或条形系列，基本上将数据集中的所有元素显示为悬停样式。

我正在尝试通过图例 onHover 回调来执行此操作，但不确定这是否正确？我设法找到了被悬停的数据集，但很难运行 updateHoverStyle 来突出显示该系列。

关于我应该在哪里寻找的任何帮助或指示？

到目前为止，这是我必须到达的地方...

legend: {
      labels: {
        usePointStyle: true
      },
      onHover: function(event, legendItem) {
        var me = this;
        var options = me.options || {};
        var hoverOptions = options.hover;
        var index = legendItem.datasetIndex;
        var ci = this.chart;
        var elements = ci.getDatasetMeta(index).data;
        ci.updateHoverStyle(elements, hoverOptions.mode, true)
      }
    }

Answer 1

您肯定是在正确的轨道上，但让我帮助您提供条形图的工作示例以及一些解释。

要实现此行为，您肯定希望使用图例onHover属性（就像您所做的那样）。但是，一旦您更新悬停样式，您必须重新渲染图表以使更改生效。这是一个例子。

legend: {
  labels: {
    usePointStyle: true
  },
  onHover: function(event, legendItem) {
    var options = this.options || {};
    var hoverOptions = options.hover || {};
    var ci = this.chart;
    hoveredDatasetIndex = legendItem.datasetIndex;
    ci.updateHoverStyle(ci.getDatasetMeta(hoveredDatasetIndex).data, hoverOptions.mode, true);
    ci.render();
  }
}

有了这个工作，现在我们需要一种方法来取消或清除图例项不再悬停时的悬停样式。否则，每次用户将鼠标悬停在图例项上时，图表中的系列都会变得越来越暗，直到它变成黑色。

所以我们需要一些方法来清除悬停样式。如果有传说onMouseLeave属性就太好了，但是唉……没有。所以为了解决这个问题，我们最终不得不“欺骗”chart.js 来做我们想做的事情。诀窍是使用工具提示custom功能。下面是一个例子。

tooltips: {
  mode: 'index',
  intersect: false,
  custom: function(tooltip) {
    if (hoveredDatasetIndex != -1) {
      var options = this.options || {};
      var hoverOptions = options.hover || {};
      var ci = this._chartInstance.chart.controller;
      ci.updateHoverStyle(ci.getDatasetMeta(hoveredDatasetIndex).data, hoverOptions.mode, false);
      hoveredDatasetIndex = -1;
      ci.render();
    }
  }
}

这样做是清除悬停样式（通过传递false给 的最后一个参数updateHoverStyle）。由于我们在图例的上下文之外，因此我仅使用回调外部的变量来存储先前悬停的数据集索引。

这个 'hack' 起作用的原因是每次鼠标在整个图表（但不是图例）上的任何位置移动时都会调用工具提示回调。所以它代表了除了传说之外的一切。因此，我们可以像使用不存在但方便的图例onMouseLeave回调一样使用它。

希望这一切都有意义。这是一个演示完整解决方案的有效代码笔。