Googlechart.jsx文件:
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { connect } from 'react-redux'
import { createHashHistory } from 'history';
import { Chart } from 'react-google-charts';
import CsvRead from '../dynamic/CsvRead'
const customHistory = createHashHistory();
class GoogleChart extends Component {
constructor(props) {
super(props);
this.state = {
options: {
title: 'Users Hours comparison',
hAxis: { title: 'User'},
vAxis: { title: 'Hours'},
legend: 'none',
axisTitlesPosition: 'out',
'isStacked': true,
colors: ['#0598d8', '#f97263'],
},
data :[]
};
}
onDone(data){
console.log(this.state.data);
this.setState({data : data});
}
render() {
console.log(this.state.data);
return (
<div><CsvRead handleFiles={this.onDone.bind(this)} />
<Chart
chartType="ColumnChart"
data = { this.state.data }
options={this.state.options}
graph_id="ColumnChart"
width="100%"
height="400px"
legend_toggle
/>
</div>
);
}
}
function select(state) {
return {
users: state.users
}
}
export default connect(select)(GoogleChart);
ReadCsv.jsx文件:此文件是ParentFile,它返回data.while (self.state.data)
,但未在GoogleChart.jsx上解析
import React, { Component } from 'react'
import { connect } from 'react-redux'
import ReactFileReader from 'react-file-reader';
var data;
var result = [];
export default class CsvRead extends React.Component {
constructor(props) {
super(props);
this.state = {
data:[],
homeLink: "manish"
}
}
handleFiles = files => {
var self = this;
var reader = new FileReader();
reader.onload = function(e) {
var csv = reader.result;
var lines = csv.split("\n");
var headers=lines[0].split(",");
for(var i=1;i<lines.length;i++){
var obj = {};
var currentline=lines[i].split(",");
for(var j=0;j<headers.length;j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
//return result; //JavaScript object
result= JSON.stringify(result); //JSON
self.setState({
data: result
});
//console.log(self.state.data);
}
reader.readAsText(files[0]);
}
onDone(data){
this.props.onDone(this.state.data);
}
render() {
return (
<ReactFileReader handleFiles={this.handleFiles.bind(this)} fileTypes={'.csv'}>
<button className='btn' >Upload</button>
</ReactFileReader>
);
}
}
如何将返回数据解析为GoogleChart.jsx?