问题描述
我请求从wordpress数据库中制作一个带有静态统计信息的rechart
图。我已经在测试网站中创建了一个数据库。数据库表名称是“统计”,并且具有“名称”,“ uv”,“ pv”和“ amt”字段。
我试图以这种方式调用它,但是出现错误“未定义数据”。这是错误的图片
这是我现在正在使用的代码。
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { LineChart,Line,Cartesiangrid,XAxis,YAxis } from "recharts";
import * as Recharts from "recharts";
import axios from "axios";
const { AreaChart,Area,Tooltip } = Recharts;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,statistics: [],error: "",};
}
componentDidMount() {
const wordpressSiteUrl = "http://cwnd.epizy.com/";
this.setState({ loading: true },() => {
axios
.get(`${wordpressSiteUrl}/wp-json/wp/v2/statistics`)
.then((res) => {
this.setState({ loading: false,statistics: res.data });
})
.catch((error) =>
this.setState({ loading: false,error: error.response.data })
);
});
}
render() {
const { statistics } = this.state;
return (
<div className="main">
<div className="header">
<h3>Graph Widget</h3>
<select className="select">
<option>Last 7 days</option>
<option>Last 15 days</option>
<option>Last 1 motnh</option>
</select>
</div>
<LineChart
className="center"
width={600}
height={400}
data={data}
margin={{ top: 5,right: 20,bottom: 5,left: 0 }}
>
<Line type="monotone" dataKey={statistics.uv} stroke="#8884d8" />
<Line type="monotone" dataKey={statistics.pv} stroke="#82ca9d" />
<Line type="monotone" dataKey={statistics.amt} stroke="#FF7F50" />
<Cartesiangrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey={statistics.name} />
<YAxis />
<Tooltip />
</LineChart>
</div>
);
}
}
export default App;
请进一步指导我该怎么做。谢谢
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)