如何将平均线添加到React High图表

时间:2018-06-18 23:19:12

标签: reactjs highcharts


我正在我的一个项目中实现Highchart条形图,我使用HighChartsMore库完成所有工作,并且想知道是否有人可以指出我正确的方向在我的图表中实现平均线。谢谢。

    import React, { Component } from 'react';

    import ReactHighcharts from 'react-highcharts';
    import axios from 'axios';
    import HighchartsMore from 'highcharts/highcharts-more';
    import { Table, Label, Segment,Button,Icon } from 'semantic-ui-react';

    HighchartsMore(ReactHighcharts.Highcharts);

    const config = (categories, data, name) => ({
        title: {
            text: name
        },
        xAxis: [{ categories }],
        series: [{ name: 'Projects', type: 'column', data }]

    });

    class BarChart extends Component {
        constructor(props) {
            super(props);

        this.state = {
            data: [],
        }
    }
    componentDidMount() {
        const { endPoint } = this.props
        fetch(endPoint,
            { credentials: 'include' }).then(response => (response.json())).then(data => this.setState({ data }));
    }

    render() {
        const { data } = this.state;
        const { categoryColumn, dataColumn, name } = this.props;


        const categories = data.reduce((t, c) => {
            //console.log(t)
            if (t.indexOf(c[categoryColumn]) === -1) {
                t.push(c[categoryColumn]);
            }
            return t;
        }, []);

        const bodyData = data.map(v => v[dataColumn]);

        const chartData = config(categories, bodyData ,name );
        return (
            <Segment padded>
                <div>
                    <ReactHighcharts config={chartData} />

                </div>
            </Segment>
        );
    }
}

    export default BarChart;

0 个答案:

没有答案