重新图表在悬停时在所有图表上显示工具提示

问题描述

我正在使用 recharts/react 来可视化一些简单的数据，然后撞到了墙。每当用户将鼠标悬停在任何图形上时，我都想在所有图形上显示线条 + 工具提示。一直在尝试使用 state 或 dispatch 但撞墙了。

为了尝试使用调度程序，我已为我的图表和仪表板文件附加了代码片段。我不知道在 chart.js 中实际调用 showTooltip 的位置。我想要的功能是在用户将鼠标悬停在任何单个图表上时显示所有图表的工具提示。如果一个工具提示=活动，我希望所有工具提示=活动。任何指导都会非常有帮助！

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 文件片段

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>
        </Container>
      </main>
    </div>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）