javascript - Chart.js - 鼠标悬停时自定义 css 到数据集

Question

我的饼图选项中有以下代码，以便将鼠标光标更改为悬停时的指针:

hover: {
      onHover: (e, el) => {
        const section = el[0];
        const currentStyle = e.target.style;
        currentStyle.cursor = section ? 'pointer' : 'normal';
      }
    }

问题

1. 即使光标指向饼图外部(或内部)，光标也会变为指针。我希望它仅在悬停数据集时发生变化。可能吗？

2. 悬停方法即使在光标停留在元素内时也会执行，这可能会导致性能问题，是否可以在 chart.js 上使用与 onmouseenter 相同的功能？

谢谢

Answer 1

你唯一的问题是你为光标使用了无效值，没有“正常”，它应该是“默认”。

试试这个:

hover: {
  onHover: (e, el) => {
    const section = el[0];
    const currentStyle = e.target.style;
    currentStyle.cursor = section ? 'pointer' : 'default'; // <-- default here
  }
}

要限制触发 onHover 方法的有用功能的次数，您可以对先前的目标进行简单检查:

onHover: (() => {
  let prevTarget;

  return (e, el) => {
    const section = el[0];

    if (prevTarget !== section) {
      // Code in this if-block is called only when necessary

      const currentStyle = e.target.style;
      currentStyle.cursor = section ? 'pointer' : 'default';

      // .........
    }

    prevTarget = section;
  }
})()