折线图更改 hover 上阴影区域的背景颜色（Chartjs）

Question

我有一个折线图（chartJs），我想在悬停时更改阴影区域的背景颜色。 我在下面试过：

const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
      data: [12, 1, 4, 3, 5, 2, 3],
      pointHoverRadius: 5,
      **backgroundColor: "blue",**
      borderWidth: 5,
      **hoverBackgroundColor: "red",** --> this instead changes the color of point on hover.
    }
  ]
};

其他配置（扩展折线图）：

options: {
        tooltips: {
          enabled: false,
          intersect: false,
          mode: 'index',
        },
        events: ['mousemove', 'mouseout', 'touchstart', 'touchmove'],
        hover: {
          mode: 'index',
          intersect: false,
        },

我想将阴影蓝色区域的颜色更改为红色。

Answer 1

这是 stackblitz 链接，在您的代码中进行了更改并且它是实时的

Chart.js 尚未提供任何属性或方法来更改 hover 上的线图下区域的颜色（具体而言）。

但是您可以通过其他方法通过在 hover 上重新渲染 canvas 来实现这一点，如果您有自己的定制钩子，这可能会很顺利，（这是实现您想要的东西的一种骇人听闻的方式，它可以工作！！！但是我个人不会推荐这个）

这是解释

1. 我添加了一个 state 将在 Hover 上切换为 true 和 false

   const [ isHover, hoverToggle ] = useState(false)

2. 我已经在 App function 中转移了 const 数据

3. 选择背景颜色来添加这个条件

   backgroundColor: isHover? "red": "blue"

4. 然后在 onHover 事件中我添加了两个条件

一个）

if ( event.type === "mousemove" && !isHover ) {
    hoverToggle(true);
}

b)

if ( event.type === "mouseout" ||
     event.type === "mouseleave" ||
     event.type === "mouseup"
   ) {
        hoverToggle(false);
     }

5. 最重要的部分通过isHover在useEffect的数组中，因此它将在isHover切换时被撤销

对于这种类型的要求，我个人推荐d3.js ，它有点复杂，但你可以在图中得到任何你想要的东西。