折线图在悬停时更改阴影区域的背景颜色（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 link，对您的代码进行了更改，它已经上线

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

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

这里是解释

1. 我添加了一种状态，它会在悬停时切换为真假

   const [ isHover, hoverToggle ] = useState(false)

2. 我已经在 App 函数中移动了 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. 并且最重要的部分在 useEffect 的数组中传递 isHover，因此它将在 isHover 切换
时被撤销

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