Блог

Главная - Вопросы по программированию - Диаграммы React Frappe: как изменить тип диаграммы по щелчку

Диаграммы React Frappe: как изменить тип диаграммы по щелчку

#javascript #reactjs #charts #frappe

#javascript #reactjs #Диаграммы #frappe

Вопрос:

У меня есть приложение с интерфейсом react, и я хочу использовать диаграммы Frappe для отображения некоторых данных. У меня есть переключатель, который изменяет значение на графике с линии на полосу. Проблема в том, что диаграмма не отображается повторно после запуска этого события (я думаю).

Здесь показана линейная диаграмма по умолчанию

После того, как я включу переключатель, заголовок изменится на bar, а график - нет.

Как мне убедиться, что график повторно отправляется после события onChange? Ниже приведен код React. Переключатель переводит состояние isToggled из true в false. Константа с именем type показывает строку, если значение isToggled равно true, и полосу, если значение isToggled равно false. Я передал константу типа в тип графика, чтобы она изменила тип диаграммы. Но это не работает.

 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;

Метки: