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

【问题标题】：Change background color of all charts beside the one hovered更改悬停的图表旁边所有图表的背景颜色
【发布时间】：2019-08-05 10:23:30
【问题描述】：

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

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

【问题讨论】：

如果我理解正确，只需切换 backgroundColor 和 hoverBackgroundColor？
那种。但我想改变所有其他栏的颜色，而不是改变我悬停的栏的颜色。
啊，我明白了，我不认为这是可能的，因为您必须插入自定义 css 才能使用 :hover 标签启用类似的功能，但由于图表呈现为画布，因此您无法访问它使用 css 轻松实现。
@Domino987 我可以得到一些我悬停在 onHover 函数上的条的顺序吗？然后我可以做一个函数来改变颜色或那个特定的栏。

标签： reactjs chart.js chartjs-2.6.0

【解决方案1】：

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

 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) }}
/>
}

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

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

【讨论】：

非常感谢您的回答。我唯一错过的是 onHover 函数中的元素参数。谢谢