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

Posted 2021-05-05

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

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

问题

1. 即使指向外部的饼（或内部），光标也会变为指针。我希望它只在悬停数据集时更改。可能吗？
2. 即使光标停留在元素内部并且可能导致性能问题，hover方法也在执行，是否可以在chart.js上使用与onmouseenter相同的功能？

谢谢

答案

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

试试这个：

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

另一答案

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

cursor: pointer;

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