0

d3_error我有两张图，一张是通过调用 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：无法读取未定义的属性“地图”

两个组件的代码相同，但其中一个不起作用。

这里有什么问题？

4

1 回答 1

0

正如您所说，您需要根据您的图表管理状态，它需要value和其组件label中的字段。BarChart像下面的东西。

state = {
  graph1: {
    label: 'Monthly Dates',
    values: [],
  },
  graph2: {
    label: 'Days',
    values: [],
  },
};

另一种更好的方法，你可以这样做：

test() {
  const { label1, abc } = this.state;
  return [{ label: label1, values: abc }];
}
于 2017-08-31T18:21:06.630 回答