javascript - 在图例悬停时突出显示线系列

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 回调一样使用它。

希望这一切都有意义。这是一个工作 codepen展示完整的解决方案。