折線圖更改 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 ，它有點復雜，但你可以在圖中得到任何你想要的東西。