javascript - Chart.js:如何在鼠标悬停时改变线的颜色和粗细？

Question

我创建了一个包含多条线(默认为 1 像素粗细)的 Chart.js 线图，我希望用户能够将鼠标悬停在任何特定的线图(而不仅仅是点)上并更改图它的线条粗细(即 3 个像素)。这可以在 Chart.js 中完成吗？

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);