Recharts 在 hover 上的所有圖表上顯示工具提示

Question

我正在使用 recharts/react 來可視化一些簡單的數據，然后撞到了牆上。 每當用戶將鼠標懸停在任何圖表上時，我都想在所有圖表上顯示線條 + 工具提示。 一直在嘗試使用 state 或調度但撞牆。

我已經為我的圖表和儀表板文件附加了代碼片段，並嘗試使用調度程序。 我不知道在 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 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>
  );
}

Answer 1

我知道這是很久以前的事了，但是有一個“syncId”屬性可以放在你的圖表上。 具有相同 syncId 的所有圖表將同時顯示工具提示。