[英]react d3 graph errors
我有兩個圖,一個是通過調用api並從中獲取數據而制成的,另一個是通過操縱它的數據而制成的。
import React, { Component } from 'react';
import * as d3 from 'd3';
import * as ReactD3 from 'react-d3-components';
import propTypes from 'prop-types';
var axios=require('axios');
var BarChart=ReactD3.BarChart;
var PieChart=ReactD3.PieChart;
class App extends Component {
constructor(props){
super(props);
this.state={
data:[],
label:'Monthly Dates',
label1: 'test',
values:[],
abc: [],
x:'',
y:''
}
}
componentDidMount(){
this.loadData();
}
loadData(){
var me=this;
axios({
method:'GET',
url:'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=SPY&apikey=2QEL3WC4KITIBISR',
}).then(function(response){
const values=[];
if(response && response.data && response.data['Time Series (Daily)']){
Object.keys(response.data['Time Series (Daily)']).forEach((keys)=>{
if (keys) {
const pointValue={
x:String(keys),
y:Number(response.data['Time Series (Daily)'][keys]['4. close'])
}
values.push(pointValue);
}
})
me.setState({
values: values
});
}
me.getHistogramData(response);
}).catch(function(error){
console.log(error);
})
}
getGraphData(){
const {label,values} = this.state;
return [{label,values}];
}
test() {
if(this.state.abc.length){
const {label1,abc} = this.state;
return [{label1,abc}];
}
return null;
}
getHistogramData(response){
var diff=0;
if(response && response.data && response.data['Time Series (Daily)']){
const diffValue=[];
var keysArr = Object.keys(response.data['Time Series (Daily)']);
var oldObj = 0;
keysArr.map((eachObj) => {
var newObj = response.data['Time Series (Daily)'][eachObj]['4. close'];
var diff = newObj - oldObj;
console.log("Difference: ", diff);
oldObj = newObj;
const values1={
x:'abc',
y: 1
}
diffValue.push(values1);
})
this.setState({
abc: diffValue
});
}
}
renderGraph(){
if((this.state.values && this.state.values.length) || (this.state.abc && this.state.abc.length)){
return(
<div>
<BarChart data={this.getGraphData()} width={17000} height={500} margin={{top:10,bottom:80,left:30,right:30}}/>
<BarChart data={this.test()} width={17000} height={500} margin={{top:10,bottom:80,left:30,right:30}}/>
</div>
)
}
}
render() {
return (
<div>
{this.renderGraph()}
</div>
)
}
}
App.propTypes={
values:React.PropTypes.array,
xScale:React.PropTypes.number,
width:React.PropTypes.number
}
export default App;
雖然第一個圖形是通過函數getGraphData()繪制的,但另一個則沒有。
當代碼被執行時,我得到了錯誤
TypeError:無法讀取未定義的屬性“ map”
這兩個組件的代碼相同,但是其中一個不起作用。
怎么了
您需要按照您所說的圖來管理狀態,它的BarChart
組件中需要value
和label
字段。 像下面這樣。
state = {
graph1: {
label: 'Monthly Dates',
values: [],
},
graph2: {
label: 'Days',
values: [],
},
};
另一種更好的方法是,您可以執行以下操作:
test() {
const { label1, abc } = this.state;
return [{ label: label1, values: abc }];
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.