Динамически добавлять серии в ReChart? - PullRequest
Новая
       4

Динамически добавлять серии в ReChart?

0 голосов
/ 29 марта 2020

Я ищу пакет графиков (в идеале бесплатный), который можно использовать на моем сайте, основанном на реакциях.

Я пробовал перезаряжаться, и он довольно хорош и прост в использовании. Тем не менее, я хотел бы динамически добавлять / удалять серии диаграмм. Я прочитал их сайт и API сделал c, но не нашел много информации. Это возможно с перезарядками? Я рад перейти к другим пакетам диаграмм, если это не поддерживается.

1 Ответ

0 голосов
/ 29 марта 2020

Для https://devexpress.github.io/devextreme-reactive/react/chart/: 

import * as React from 'react';
import Paper from '@material-ui/core/Paper';
import {
    Chart,
    ArgumentAxis,
    ValueAxis,
    LineSeries,
    Title,
    Legend,
} from '@devexpress/dx-react-chart-material-ui';
import {withStyles} from '@material-ui/core/styles';
import {Animation} from '@devexpress/dx-react-chart';

const format = () => tick => tick;
const legendStyles = () => ({
    root: {
        display: 'flex',
        margin: 'auto',
        flexDirection: 'row',
    },
});
const legendLabelStyles = theme => ({
    label: {
        paddingTop: theme.spacing(1),
        whiteSpace: 'nowrap',
    },
});
const legendItemStyles = () => ({
    item: {
        flexDirection: 'column',
    },
});

const legendRootBase = ({classes, ...restProps}) => (
    <Legend.Root {...restProps} className={classes.root}/>
);
const legendLabelBase = ({classes, ...restProps}) => (
    <Legend.Label className={classes.label} {...restProps} />
);
const legendItemBase = ({classes, ...restProps}) => (
    <Legend.Item className={classes.item} {...restProps} />
);
const Root = withStyles(legendStyles, {name: 'LegendRoot'})(legendRootBase);
const Label = withStyles(legendLabelStyles, {name: 'LegendLabel'})(legendLabelBase);
const Item = withStyles(legendItemStyles, {name: 'LegendItem'})(legendItemBase);
const demoStyles = () => ({
    chart: {
        paddingRight: '20px',
    },
    title: {
        whiteSpace: 'pre',
    },
});

const ValueLabel = (props) => {
    const {text} = props;
    return (
        <ValueAxis.Label
            {...props}
            text={`${text}`}
        />
    );
};

const titleStyles = {
    title: {
        whiteSpace: 'pre',
    },
};
const TitleText = withStyles(titleStyles)(({classes, ...props}) => (
    <Title.Text {...props} className={classes.title}/>
));

class Demo extends React.PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            data: null,
            series: [],
            maxValue: 0,
            title: ''
        };
    }

    changeSeries = (series) => {
        this.setState({
            data: series.data,
            ...//other state params
        })
    }

    render() {
        const {data: chartData} = this.state;
        const {classes} = this.props;

        return (

            <Paper>
                {data ?
                    <Chart
                        data={chartData}
                        className={classes.chart}
                    >
                        <ArgumentAxis tickFormat={format}/>
                        <ValueAxis
                            max={this.state.maxValue}
                            labelComponent={ValueLabel}
                        />

                        {
                            this.state.series.map(s => <LineSeries
                                name={s.name}
                                valueField={s.valueField}
                                argumentField={s.argumentField}
                            />)
                        }

                        <Legend position="bottom" rootComponent={Root} itemComponent={Item} labelComponent={Label}/>
                        <Title
                            text={this.state.title}
                            textComponent={TitleText}
                        />
                        <Animation/>
                    </Chart> : <div>no data</div>}
            </Paper>
        );
    }
}

export default withStyles(demoStyles, {name: 'Demo'})(Demo);

вы можете позвонить changeSeries с вашей серией по мере необходимости.

...