我正在尝试发出一个API请求（GET），然后收到的数据应该作为统计数据附加在图表上，这是我的代码，当我运行它时我没有在图表上得到任何东西。 我正在尝试发出一个API请求（GET），然后接收的数据应作为统计数据附加在图表上，这是我的代码，当我运行它时我没有在图表上得到任何东西。 我正在尝试发出一个API请求（GET），然后接收的数据应作为统计数据附加在图表上，这是我的代码，当我运行它时我没有在图表上得到任何东西。 我正在尝试发出一个API请求（GET），然后收到的数据应该作为统计数据附加在图表上，这是我运行它时的代码我在图上没有任何内容
import React, {Component} from 'react';
import AmCharts from "@amcharts/amcharts3-react";
import {Bar, Doughnut, Line, Pie, Polar, Radar} from 'react-chartjs-2';
import {CardColumns, Card, CardHeader, CardBody,Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap';
import axios from 'axios';
import Modals from '../Notifications/Modals/Modals.js';
import RangedDatePicker from '../DatePicker/RangedDatePicker.js';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import ButtonDropdowns from '../Buttons/ButtonDropdowns/ButtonDropdowns.js';
let loginPath = 'http://127.0.0.1:8000/api/reactions/daily';
let config = {
headers: {
'Access-Control-Allow-Origin': '*',
'Authorization': 'Bearer '+localStorage.getItem('token')
},
mode: 'no-cors'
};
function generateData() {
var successDataCount=[];
axios.get('http://127.0.0.1:8000/api/reactions/daily?from=2017-01-01 &to=2018-06-04 ', config)
.then((response )=> {
for(let i=0 ; i<response.data[0].reactions.length;i++)
{
var year =response.data[0].reactions[i].year;
var month =response.data[0].reactions[i].month;
var day =response.data[0].reactions[i].day;
var dateOfReaction = new Date(year,month,day);
var count = response.data[0].reactions[i].count;
successDataCount.push({date:dateOfReaction ,count:count });
}
var firstDate = new Date();
var dataProvider = [];
for (var i = 0; i < 100; ++i) {
var date = new Date(firstDate.getTime());
date.setDate(i);
dataProvider.push({
date: date,
value: Math.floor(Math.random() * 100)
});
}
console.log(dataProvider)
return dataProvider;
})
.catch((error) => console.log(error))
}
class Charts extends Component {
constructor(props) {
super(props);
const minDate = new Date();
const maxDate = new Date();
minDate.setFullYear(minDate.getFullYear() - 1);
minDate.setHours(0, 0, 0, 0);
maxDate.setFullYear(maxDate.getFullYear() + 1);
maxDate.setHours(0, 0, 0, 0);
this.state = {
dataProvider: [],
timer: null,
minDate: minDate,
maxDate: maxDate,
autoOk: false,
};
this.handleChangeMinDate = this.handleChangeMinDate.bind(this);
this.handleChangeMaxDate= this.handleChangeMaxDate.bind(this)
this.getTimeRangeFromCalendar = this.getTimeRangeFromCalendar.bind(this);
}
componentDidMount() {
// Update the chart dataProvider every 3 seconds
this.setState({
dataProvider: generateData()
});
}
componentWillUnmount() {
clearInterval(this.state.timer);
}
//Getting StartDate and EndDate from calendar to update charts
getTimeRangeFromCalendar(range){
let from = JSON.stringify(range.startDate._d);
let to = JSON.stringify(range.endDate._d);
console.log('*************************CHOISEN STATISTICS*************************')
let config = {
headers: {
'Access-Control-Allow-Origin': '*',
'Authorization': 'Bearer '+localStorage.getItem('token')
},
mode: 'no-cors',
params :{
from: from,
to: to
}
};
console.log(config.params)
console.log(config.params.to)
axios.get('http://127.0.0.1:8000/api/reactions/daily', {
headers: {
'Access-Control-Allow-Origin': '*',
'Authorization': 'Bearer '+localStorage.getItem('token')
},
mode: 'no-cors',
params :{
from: from,
to: to
}
} )
.then((response )=> console.log(response.data))
.catch((error) => console.log(error))
}
handleChangeMinDate(event, date) {
this.setState({
minDate: date,
} , function(){console.log(this.state.minDate)});
};
handleChangeMaxDate(event, date) {
this.setState({
maxDate: date,
});
};
render() {
const config = {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop": true,
"adjustBorderColor": false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color":"#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable": true
},
"valueScrollbar":{
"oppositeAxis": false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": this.state.dataProvider
};
return (
<div className="animated fadeIn">
<CardColumns className="cols-2 column-count-1">
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Choosing parameters
</CardHeader>
<CardBody>
<MuiThemeProvider>
<RangedDatePicker sendMinDate={this.handleChangeMinDate} sendMaxDate= {this.handleChangeMaxDate}/>
</MuiThemeProvider>
<ButtonDropdowns/>
</CardBody>
</Card>
</Col>
</Row>
<Card>
<CardHeader>
Statistics
<div className="card-actions">
<a href="http://www.chartjs.org">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<div className="App">
<AmCharts.React style={{ width: "100%", height: "500px" }} options={config} />
</div>
</CardBody>
</Card>
</CardColumns>
</div>
)
}
}
export default Charts;
这是我点击图表时的错误........................
