我正在我的一个项目中实现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;