《传奇悬停》中的亮点系列

Question

真的很喜欢Chart.js，但我正在努力创建自定义事件（不是过分经验，因此仍在学习）

我试图在悬停传奇工具提示时突出显示完整的行或条系列，从本质上显示数据集中的所有元素。

我试图通过传奇的Onshover回调来执行此操作，但不确定这是否正确？我已经设法发现数据集悬停了，但努力运行更新的障碍物以突出该系列。

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

这是我到目前为止的地方...

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属性，那将是很棒的，但是可惜……没有。因此，为了解决这个问题，我们最终必须"欺骗"图表。诀窍是使用工具提示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，可以演示完整的解决方案。

Answer 2

您的代码中只缺少一件事：使用ci.render();

刷新图表

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)
        ci.render();  //    <<---- commit changes
      }
    }

，但这最终将突出显示所有痕迹：您必须在突出显示盘旋的所有其他痕迹之前删除所有其他痕迹，BT骑自行车：

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;
        for (var i=0; i < ci.datasets.length-1; i++) {
           var elements = ci.getDatasetMeta(i).data;
           ci.updateHoverStyle(elements, hoverOptions.mode, false) ; // <<<--- turn off higlight
        }
        var elements = ci.getDatasetMeta(index).data;
        ci.updateHoverStyle(elements, hoverOptions.mode, true) // <<-- Turn on 
        ci.render();  
      }
    }