1

我有一个带有反应前端的应用程序，我想使用 Frappe 图表来显示一些数据。我有一个开关，可以将图表上的值从线条更改为条形。问题是触发此事件后图表不会重新呈现（我认为）。

这里显示了默认的折线图

打开开关后，标题变为条形，但图表没有。

如何确保在 onChange 事件发生后重新呈现图形？React 代码包含在下面。该开关使 isToggled 状态从 true 变为 false。如果 isToggled 为 true，则命名类型的常量显示 line，如果 isToggled 为 false，则显示 bar。我在图形类型中传递了类型常量，以便它更改图表类型。但这不起作用。

import React, {useState, useEffect} from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import 'frappe-charts/dist/frappe-charts.min.css'
import ReactFrappeChart from "react-frappe-charts";
import Switch from '@material-ui/core/Switch';


function LineChart(props) {
    const { window } = props;
   
    const theme = useTheme();
    const [mobileOpen, setMobileOpen] = React.useState(false);
    
    const [isToggled, setToggled] = useState(false);
   
    console.log(isToggled)
    
    const type = isToggled ? "bar": "line";
  
    return (
      <div>
        <Typography>This is a {type} chart</Typography>

        <ReactFrappeChart
        type= {type}
        colors={["#3D70B2"]}
        axisOptions={{ xAxisMode: "tick", yAxisMode: "tick", xIsSeries: 1 }}
        height={250}
        data={{
          labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          datasets: [
            { name: "dataset 1", values: [18, 40, 30, 35, 8, 52, 17, 4] },
            { name: "dataset 2", values: [12, 35, 32, 40, 4, 2, 15, 6] }
          
          ],
        }}
        
      />
      
      <Box component={Grid} item xs={12} display="flex" justify='space-between'>
      <Switch checked={isToggled} onChange={() => setToggled(!isToggled)}></Switch>
      </Box>
    </div>
    );
  }
  
  LineChart.propTypes = {
    window: PropTypes.func,
  };
  
  export default LineChart;

4

0 回答 0