React Components の Victory Library の VictoryBar を使用して棒グラフをプロットできません。データベースのデータを使用して、Redux と axios ミドルウェアを使用してデータを前面に出しています。
ペイロードは更新されていますが、たとえば React コンポーネントの状態は大きくなるだけです。1 つの国からのデータは、オブジェクトの配列 = 26 を提供します。もう一度ボタンをクリックすると、オブジェクトが連結され、52 個のオブジェクトの配列になります。これは、データを更新していないため、グラフをゆがめます。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router';
import { VictoryChart } from 'victory-chart';
import { VictoryLine } from 'victory-line';
import { VictoryAxis } from 'victory-axis';
import { VictoryBar } from 'victory-bar';
import { getWaterData } from '../actions/get_water_data';
import CountryList from '../containers/countryList';
// console.log('Printing the Water Data', waterData);
var plottingData = [
{ x: '1990', y: 0 },
{ x: '1992', y: 0 },
{ x: '1994', y: 0 },
{ x: '1996', y: 0 },
{ x: '1998', y: 0 },
];
var processWaterData;
class VictoryPlots extends Component {
constructor(props) {
super(props);
getWaterData();
this.update = this.update.bind(this);
this.state = {
processed: plottingData,
count: 2,
countryId: 1,
// waterData: getWaterData(),
};
}
processingData() {
processWaterData = [];
for (var i = 0; i < this.props.waterData.length; i++) {
processWaterData.push({x: this.props.waterData[i].year, y: this.props.waterData[i].value });
}
// return processWaterData;
this.setState({ processed: processWaterData}, function() {
console.log("SET State", this.state.processed);
});
}
// data= { this.state.data } />
// this.props.getWaterData();
onInputChange(pCountry) {
this.setState({ processed: [{x:'1990', y: 100}] });
this.setState({countryId: pCountry}, function() {
console.log("countryID: ", this.state.countryId);
});
}
render() {
return (
<div>
<div>
<input value = { this.state.countryId }
onChange = { event => this.onInputChange(event.target.value)} />
</div>
<Link to="/">Main</Link>
<button onClick = { this.processingData.bind(this) } >
Plot Graph
</button>
<button onClick = { () => { this.props.getWaterData(this.state.countryId);}}>
Water Data
</button>
<VictoryChart >
<VictoryBar
data = { this.state.processed }
dataAttributes= {[
{fill: "cornflowerblue"}
]}
/>
</VictoryChart>
</div>
);
}
}; // End of Component
function mapStateToProps({ waterData }) {
// console.log('WATER STATE:', { waterData });
return { waterData };
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ getWaterData: getWaterData }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(VictoryPlots);
The VictoryBar: React の VictoryBar チャート
入力ボックスの入力を更新すると、チャートが更新されるように、チャートの状態を更新する方法がわかりません。this.state.processedの情報を更新するために使用していVictoryBarます。this.props.waterDataは Redux Promise から受け取ったデータで、国ごとに適切なデータが返されthis.state.waterDataますが、Plot Graph をクリックするたびに に連結されます。Plot Graph をクリックするたびに、新しいプロットを生成したいと思います。
それは私の間違いでした。私はすでにそれを修正しており、Plot Graph Button をクリックしたときにコンポーネントの状態を更新する方法をたくさん試しました。より明確にするために、アクション リデューサーと、ここで達成しようとしているもののスクリーンショットを貼り付けます。
アクション リデューサー (get_water_data.js)
import axios from 'axios';
// Send action to server
export const GET_WATER_DATA = 'GET_WATER_DATA';
export function getWaterData(pCountryId) {
// console.log('Calling Water Data Function');
const url = '//localhost:3001/api/statistics/' + pCountryId;
// console.log(url);
const request = axios.get(url);
// console.log('PROMISE:', request.data);
return {
type: GET_WATER_DATA,
payload: request,
};
}
動作するコードを更新しましたが、配列を変更していて、スプライスを使用しています。これは、グラフのプロットをクリックするたびに、画面に新しいデータをレンダリングする正しい方法ではありません。これを正しい方法で実装しようとしていますが、方法がわからないと思います。
processingData() {
var processWaterData = []
for (var i = 0; i < this.props.waterData.length; i++) {
processWaterData.push({x: this.props.waterData[i].year, y: this.props.waterData[i].value });
}
this.setState({ processed: processWaterData}, function() {
// console.log("processed info after: ", this.props.waterData);
if (this.props.waterData.length > 1) {
// console.log("Length of the waterData:", this.props.waterData.length);
this.props.waterData.splice(0, this.props.waterData.length);
}
});
}
