尝试使用反应调出高图表。我有多个 fetch api 调用(为了说明,我只添加了 2 个),我将使用它们的数据在 UI 中呈现某些内容。
在此示例中,data1 用于呈现表格,data2 用于呈现高图。
我将这些调用的输出存储在一个状态对象中。当我调用这些 API 时,我正在获取数据,但无法将其设置为 highcharts 的“系列”属性以进行渲染,因此没有渲染任何内容。
我正在获取的数据的结构
“api2”:[{“name”:“Test1”,“value”:12},{“name”:“Test2”,“value”:9}]
有人可以帮我弄这个吗?我哪里错了?
我为此使用 highcharts-react-official
代码
import * as React from 'react';
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official';
interface IState {
data1: [];
data2: [];
}
interface IProps {}
class Example extends React.Component<IProps,IState> {
constructor(props:any)
{
super(props);
this.state = {
data1: [],
data2: []
}
}
componentDidMount()
{
Promise.all([
fetch('http://localhost:3001/api1'),
fetch('http://localhost:3001/api2')
])
.then(([res1, res2]) => Promise.all([res1.json(), res2.json()]))
.then(([data1, data2]) => this.setState({
data1: data1,
data2: data2
}));
}
render() {
let options:any;
options = {
chart: {
type: 'column'
},
credits: false,
exporting: {enabled: false},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'bottom'
},
xAxis: {
visible:false
},
yAxis: {
visible:false
},
plotOptions: {
column: {
dataLabels: {
enabled: true }
}
},
series: this.state.data2
};
return(
<div className="an-content">
//some table rendering will happen here
<HighchartsReact
highcharts={Highcharts}
options={options}
/>
</div>
)
}
}
export default Example;