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

Question

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

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

问题

1. 即使指向外部的饼（或内部），光标也会变为指针。我希望它只在悬停数据集时更改。有可能吗？

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

由于

Answer 1

你唯一的问题是你使用了无效的光标值，没有＆＃34;正常＆＃34;，它应该是＆＃34;默认＆＃34;。

试试这个：

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

Answer 2

只需将CSS样式添加到饼图数据集。

cursor: pointer;

使用此方法，您甚至不需要Javascript来设置游标属性。