Chart.js：如何让折线图系列（其中之一）在鼠标悬停时改变线条颜色和粗细？

Question

我用Chart.js创建了一个带有多条线的折线图（默认为1像素粗），我想要用户能够将鼠标放在任何一条特定的线上（而不仅仅是点），并且使该线变粗（例如3像素）。在Chart.js中是否可以实现这个功能？

- sunw

---

你好，能否提供一个可运行的示例并说明你尝试了什么？ - SirPeople

Answer 1

这个想法是找到与您想要更改的图表线对应的数据集对象，更新其borderWidth属性，然后调用chart.update()。

以下是一个例子，请注意onHover函数。

注：此处的“图表线”指的是图表中的线条或边框。

var config = {
  type: 'line',
  options: {
    tooltips: {
      mode: 'nearest',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: false
    },


    // LOOK AT ME!!! I'M SO IMPORTANT!!!
    onHover: function onHover (evt, activeElements) {
      if (!activeElements || !activeElements.length) return;
      var datasetIndex = activeElements[0]._datasetIndex;
      var activeDataset = this.data.datasets[datasetIndex];
      activeDataset.borderWidth = 5;
      this.update();
    },


  },
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'BlueLine',
      fill: false,
      backgroundColor: window.chartColors.blue,
      borderColor: window.chartColors.blue,
      data: [57, 66, 17, 23, 16, 38, 60, 25, 5],
    }, {
      label: 'RedLine',
      fill: false,
      backgroundColor: window.chartColors.red,
      borderColor: window.chartColors.red,
      data: [23, 6, 32, 57, 38, 17, 19, 7, 23],
    }]
  },
};

var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);

- hackape

---

谢谢你的回答！但是看起来activeElements [0]._datasetIndex始终是相同的值；你是不是想从activeElements中仅获取第一个项目的_datasetIndex？ - sunw

当我尝试您的解决方案时，悬停在图表上的任何位置都只会导致第一个数据集更改其样式。预期行为是仅更改悬停的线条的样式，并在鼠标移开并移动到其他地方时撤消样式。 - sunw

@sunw 我不知道你的完整配置，但是在我的设置中 tooltip/hover: { mode: 'nearest', intersect: false } 也很重要。在 chartjs 中，线条是无法悬停的，这个 hack 让你可以悬停激活最近的数据点，从而获得类似于在线上悬停的效果。确保你已经正确理解了这一部分。我的示例是可运行的，请运行它以查看效果。你应该会看到 activeElements[0] 发生了变化。 - hackape

关于如何在取消悬停时撤销样式，我认为这部分由您自己来解决。完整的撤销实现需要大量的代码，我不太愿意打出来。您已经知道如何选择悬停的行，并设置样式，然后更新其视图。撤销基本上是这个过程的反向操作。 - hackape

唯一困难的部分在于检测以下两种情况：1）先前悬停的行现在不再悬停，2）先前悬停的行现在仍然悬停。1）允许您撤消样式，2）允许您排除不必要的视图更新以提高性能。您需要实现一个机制来跟踪当前悬停目标状态。 - hackape