我在ReactJS(recharts)的图形图表上的x轴上显示来自restFulAPI的数据,但是Dates太长,并且他在图形上仅显示了两个datetime,因为datetime的格式如下:
“ 2019-10-17T02:00:00.000Z”
我想剪下这个:
T02:00:00.000Z
代码:
import React from 'react';
import Select from "react-dropdown-select";
import './aladin.css';
import {
Bar,
BarChart,
AreaChart,
Area,
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend
} from 'recharts';
class Aladin extends React.Component {
state = {
}
constructor(props) {
super(props);
this.state = {
loading: true,
dataAPI: null,
temp: null,
dats: null,
};
}
async componentDidMount() {
const url = "http://localhost:8000/?date=2019-10-20&station=41027&daysForward=2";
const response = await fetch(url);
let data = await response.json();
//console.log(data.aladinModel[0][0].TA);
this.setState({ dataAPI: data.aladinModel[0], loading: false });
this.setState({ temp: data.aladinModel[0], loading: false });
this.setState({ dats: data.aladinModel[0], loading: false });
console.log(this.state.temp[1].TA);
console.log(this.state.dats[1].DATS);
}
render() {
return (
<div className="grid-item-aladin">
<p><b>Температура:</b></p>
<LineChart width={600} height={300} data={this.state.dats}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="DATS" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="TA" stroke="#8884d8" activeDot={{ r: 8 }} strokeDasharray="5 5" />
</LineChart>
</div>
);
}
}
export default Aladin;
最佳答案
你可以这样做:
new Date('2019-10-17T02:00:00.000Z').toLocaleDateString();
或者,您也可以使用
moment
库并执行以下操作:moment('2019-10-17T02:00:00.000Z').format('YYYY-MM-DD');
关于javascript - 如何在ReactJS中从完整的DateTime“2019-10-17T02:00:00.000Z”中削减“02:00:00.000Z”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58656029/