更改悬停图表旁边所有图表的背景颜色

Question

我想更改除一个用户悬停在其上的所有栏的注册颜色。就像下面的图片一样，我悬停的图表是浅蓝色的，但我想让所有其他的条形图都变成浅蓝色，而将悬停的条形图保持为深蓝色。

const data = 
  {
    labels: label,
    datasets:[
      {
        label:'',
        data: values,
        backgroundColor: '#1690ca',
        hoverBackgroundColor: '#d0e9f4'
      }
    ]
  }

Answer 1

正如评论中所讨论的那样，您可以这样做：

 const BarChart = ({values}) => {

  [data, setData] = useState([]);
  [hovering, setHovering] = useState(null);

  useEffect(() => {
    setData({
      labels: label,
      datasets:values.map((value, index) => ({
        label:'',
        data: value,
        backgroundColor: index === hovering ? '#1690ca' :  '#d0e9f4',
        hoverBackgroundColor: index === hovering ? '#d0e9f4' :  '#1690ca',
      }))
    });
  },[hovering, values]);

<Bar
  data={data}
  width={100}
  height={50}
  options={{ onHover: (event,elements) => setHovering(elements[0]._index) }}
/>
}

这将更新您的数据以设置您在问题中提到的当前悬停元素的颜色。您可能必须更改它以匹配您的 data/setup，但这适用于我的设置。

希望这对您有所帮助。编码愉快。

更改悬停图表旁边所有图表的背景颜色

Change background color of all charts beside the one hovered

reactjs

chart.js

chartjs-2.6.0