[英]Recharts show tooltip on ALL charts on hover
I'm using recharts/ react to visualize some simple data, and running into a wall.我正在使用 recharts/react 来可视化一些简单的数据,然后撞到了墙上。 I want to show the line + tooltip on ALL the graphs whenever a user hovers over any of the graphs.每当用户将鼠标悬停在任何图表上时,我都想在所有图表上显示线条 + 工具提示。 Been trying to use state or dispatch but running into a wall.一直在尝试使用 state 或调度但撞墙。
I've attached code snippets for my chart and dashboard files with the attempt at using dispatcher.我已经为我的图表和仪表板文件附加了代码片段,并尝试使用调度程序。 I dont't know where in chart.js to actually call showTooltip.我不知道在 chart.js 中实际调用 showTooltip 的位置。 The functionality I want is to show the tooltips for all charts whenever a user hovers over any single chart.我想要的功能是在用户将鼠标悬停在任何单个图表上时显示所有图表的工具提示。 If one tooltip = active, I want all tooltips=active.如果一个工具提示=活动,我希望所有工具提示=活动。 Any guidance would be super helpful!任何指导都会非常有帮助!
chart.js snippet chart.js 片段
export default function Chart(props) {
const {state, dispatch} = useContext(AppContext);
const showTooltip = (newValue) => {
dispatch({ type: 'HOVER', data: newValue,});
};
const theme = createMuiTheme({
palette: {
primary: {
main: '#041f35'
},
secondary: {
main: '#5dc5e7'
}
}
});
return (
<React.Fragment>
<MuiThemeProvider theme={theme}>
<Title>{props.title}</Title>
<ResponsiveContainer width="100%" height="100%">
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 5,
left: -35,
bottom: 5,
}}
>
<XAxis dataKey="time" />
<YAxis axisLine={false} tickLine={false}/>
<Tooltip />
<CartesianGrid vertical={false} stroke="#d3d3d3"/>
<Line type="monotone" dataKey="mktplace1" stroke={theme.palette.primary.main} activeDot={{ r: 8 }} />
<Line type="monotone" dataKey="mktplace2" stroke={theme.palette.secondary.main} />
</LineChart>
</ResponsiveContainer>
</MuiThemeProvider>
</React.Fragment>
);
}
dashboard.js file snippet dashboard.js 文件片段
export const AppContext = React.createContext();
// Set up Initial State
const initialState = {
active: new Boolean(false),
};
function reducer(state, action) {
switch (action.type) {
case 'HOVER':
return {
active: new Boolean(true)
};
default:
return initialState;
}
}
export default function Dashboard() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div className={classes.root}>
<CssBaseline />
<main className={classes.content}>
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={2}>
{/* Chart */}
<Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
<Paper className={fixedHeightPaper}>
<AppContext.Provider value={{ state, dispatch }}>
<Chart title="Sales by Marketplace"/>
</AppContext.Provider>
</Paper>
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
<Paper className={fixedHeightPaper}>
<AppContext.Provider value={{ state, dispatch }}>
<Chart title="Sales by Marketplace"/>
</AppContext.Provider>
</Paper>
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
<Paper className={fixedHeightPaper}>
<AppContext.Provider value={{ state, dispatch }}>
<Chart title="Sales by Marketplace"/>
</AppContext.Provider>
</Paper>
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
<Paper className={fixedHeightPaper}>
<AppContext.Provider value={{ state, dispatch }}>
<Chart title="Sales by Marketplace"/>
</AppContext.Provider>
</Paper>
</Grid>
</Grid>
</Container>
</main>
</div>
);
}
I know this was a long time ago, but there is a "syncId" property to put on your chart.我知道这是很久以前的事了,但是有一个“syncId”属性可以放在你的图表上。 All charts with the same syncId will show tooltips at the same time.具有相同 syncId 的所有图表将同时显示工具提示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.