更改悬停图表旁边的所有图表的背景色
更改悬停图表旁边的所有图表的背景色
提问于 2019-08-05 18:23:30
我想改变所有栏的reg颜色，除了一个用户悬停在上面。就像下面的图片一样，我悬停的图表是浅蓝色的，但我想让其他的条形都变成浅蓝色，并保持悬停在上面的那个为深蓝色。
const data =
{
labels: label,
datasets:[
{
label:'',
data: values,
backgroundColor: '#1690ca',
hoverBackgroundColor: '#d0e9f4'
}
]
}
Stack Overflow用户
回答已采纳
发布于 2019-08-05 19:01:07
正如评论中所讨论的，您可以这样做：
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) }}
/>
}这将更新您的数据以设置您在问题中提到的当前悬停元素的颜色。您可能需要更改它以匹配您的数据/设置，但这适用于我的设置。
希望这能有所帮助。祝你编码愉快。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57356651
复制相关文章
相似问题
腾讯云开发者
