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属性，那就太好了，但是唉...没有。因此，为了解决这个问题，我们最终不得不哄骗＆＃34; 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的最后一个参数）。由于我们不在图例的上下文中，因此我只使用回调外部的变量来存储先前悬停的数据集索引。

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

希望这一切都有道理。这是一个有效的codepen来演示完整的解决方案。

在图例悬停

1 个答案: