React Frappe Charts：如何在点击时更改图表类型

问题描述

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

如何确保在 onChange 事件发生后重新渲染图表？ React 代码包含在下面。该开关使 isToggled 状态从 true 变为 false。如果 isToggled 为真，则名为 type 的常量显示 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,32,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;

解决方法

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

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

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