如何解决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 举报,一经查实,本站将立刻删除。