reactjs - 多个用户的表格内的雷达图 React
问题描述
我正在尝试为团队成员构建雷达图，以检查他们如何为项目做出贡献，因此对于成员，我想创建一个显示各个领域的雷达图。这个想法是在与每个团队成员对应的表格中构建数据 - 但我总是得到空图表。相同的数据有点像：
Data:[
{name: 'ABC', gitCommit: '200', gitPull: '3', jira: '4', slack: '5', confluence: '6'},
{name: 'XYZ', gitCommit: '200', gitPull: '3', jira: '4', slack: '5', confluence: '6'}
]
我创建了一个表：
<table id='projects' className="zebra" data-sortable="">
<tbody>
<tr>{this.renderChartHeader()}</tr>
{this.renderChart()}
</tbody>
</table>
并在 renderChart 上调用以下内容：
renderChart(){
return this.state.Data.map((Data, index) => {
return(
<tr key={Data.name}>
<td>{Data.name}</td>
<td>
<RadarChart cx={300} cy={250} outerRadius={150} width={500} height={500} data={Data}>
<PolarGrid gridType='circle'/>
<PolarAngleAxis dataKey="name" />
<PolarRadiusAxis angle={30} domain={[0, 10]} />
<Radar name="Sara" dataKey="jira" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
<Legend />
</RadarChart>
</td>
</tr>
)
})
}
这个想法是有一个看起来像这样的表：
已编辑添加了代码的完整版本在此代码中，当我们单击按钮时将使用 handleSubmit，它将从后端 API 填充数据 - 将填充 Data 变量 - 但现在我正在尝试使用硬编码的值数据变量。
import React from 'react';
import uomHeader from '../header/uomheader.js';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
import { storeGet } from '../_helpers/helper-funcs.js';
import BarChart from 'react-bar-chart';
import {
Radar, RadarChart, PolarGrid, Legend,
PolarAngleAxis, PolarRadiusAxis,
} from 'recharts';
// import Paper from '@material-ui/core/Paper';
// import {
// Chart,
// BarSeries,
// Title,
// ArgumentAxis,
// ValueAxis,
// } from '@devexpress/dx-react-chart-material-ui';
// import { Animation } from '@devexpress/dx-react-chart';
const team = 1;
const teamName = "SWEN90013-2020-SP";
const margin = {top: 20, right: 20, bottom: 30, left: 40};
class IndividualContributionPage extends React.Component{
constructor(props){
super(props);
this.state = {
projectName: '',
submitted: false,
total: [
{student_id:'', fullname:''}
],
// The Array to store the data
Data:[
{name: 'ABC', gitCommit: '200', gitPull: '3', jira: '4', slack: '5', confluence: '6'},
{name: 'XYZ', gitCommit: '200', gitPull: '3', jira: '4', slack: '5', confluence: '6'},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
],
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
const { name, value } = e.target;
this.setState({ [name]: value });
}
handleSubmit(e) {
e.preventDefault();
const { projectName} = this.state;
this.props.getTeamList(team);
this.setState({ submitted: true });
if(storeGet("teamList")!=null){
for(var i in storeGet("teamList")){
// Get the member's configuration
this.props.getMemberConfiguration(projectName,storeGet("teamList")[i].student_id);
console.log("%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%");
console.log(storeGet("memberConfig"));
// Get the full name
this.state.Data[i].name = storeGet("teamList")[i].fullname;
console.log(this.state.Data[i].name);
//Get SLACK - need User ID
this.props.getSlackUser(team, storeGet("teamList")[i].student_id);
//Get JIRA data - need User ID
this.props.getJiraUser(teamName, storeGet("teamList")[i].student_id);
// TODO
// Get Git Data - need Git Username, currently hardcoded
this.props.codeCommitsPerMember(projectName, "zhanglihuan");
// TODO
//Get Conflunece Data - need Username, currently hardcoded
this.props.numPagesPerMember("yujuzhang");
if(storeGet("commitsPerMember")!=null){
this.state.Data[i].gitCommit = storeGet("commitsPerMember").total;
// TODO: No pull request in the return value, so using the file_changed in temporary
this.state.Data[i].gitPull = storeGet("commitsPerMember").file_changed;
}
// console.log(this.state.Data[i].gitCommit);
// console.log(this.state.Data[i].gitPull);
if(storeGet("slackUser")!=null){
this.state.Data[i].slack = storeGet("slackUser")['total_number'];
}
// if(storeGet("jiraUser")!=null){
// this.props.Data[i].jira = storeGet("jiraUser")['count_issues_done'];
// }
// console.log(storeGet("numPagesPerMember"));
// if(storeGet("numPagesPerMember")!=null){
// this.props.Data[i].confluence = storeGet("numPagesPerMember");
// }
}
}
}
render() {
const {submitted} = this.state;
return (
<div className="uomcontent">
{uomHeader("Individual Contribution Page")}
<div role="main">
<div className="page-inner">
<form name="form">
<div>
<a className="button cta" onClick={this.handleSubmit} >Fetch</a>
</div>
{submitted &&
<table id='projects' className="zebra" data-sortable="">
<tbody>
<tr>{this.renderChartHeader()}</tr>
{this.renderChart()}
</tbody>
</table>
}
</form>
</div>
</div>
</div>
)
}
renderChartHeader() {
let header = ['Student Name', 'Radar Chart'];
return header.map((key, index) => {
return <th key={index}>{key.toUpperCase()}</th>
})
}
renderChart(){
return this.state.Data.map((Data, index) => {
return(
<tr key={Data.name}>
<td>{Data.name}</td>
<td>
<RadarChart cx={300} cy={250} outerRadius={150} width={500} height={500} data={Data}>
<PolarGrid gridType='circle'/>
<PolarAngleAxis dataKey="name" />
<PolarRadiusAxis angle={30} domain={[0, 10]} />
<Radar name="ABC" dataKey="jira" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
<Legend />
</RadarChart>
</td>
</tr>
)
})
}
}
function mapState(state) {
const { projectName } = state;
return { projectName };
}
const actionCreators = {
loginGit: userActions.loginGit,
totalCodeCommits: userActions.totalCodeCommits,
codeCommitsPerMember: userActions.codeCommitsPerMember,
AllPagesOnConfluence: userActions.AllPagesOnConfluence,
getTeamList: userActions.getTeamList,
getMemberConfiguration: userActions.getMemberConfiguration,
getSlackUser: userActions.getSlackUser,
getJiraUser: userActions.getJiraUser,
numPagesPerMember: userActions.numPagesPerMember,
};
const Product = connect(mapState, actionCreators)(IndividualContributionPage);
export { Product as IndividualContributionPage };
解决方案
问题在这里：
<RadarChart cx={300} cy={250} outerRadius={150} width={500} height={500} data={Data}>
特别是在data道具。它应该接收整个对象数组 ( this.state.Data)，但您的Data此处仅指该map函数的一个对象。
这应该可以解决您的问题：
data={this.state.Data}
推荐阅读
- javascript - 使用 textarea 执行 Javascript 代码
- java - 从硒中的渲染器接收消息超时？
- python - 为什么模型方程输出与模型训练输出不匹配
- r - 有没有办法通过多组因素来总结？
- javascript - 在javascript中找到随机数的总和
- flutter - 错误：shared_preferences_platform_interface-1.0.3/pubspec.yaml：缺少必需的“名称”字段
- python - 定义新类时在 __init__ 内外引发 Python 异常
- accelerometer - 如何从加速度的三个轴分量中找到加速度大小的方向？
- r - 如何在 Shiny 中 selectInput 后自动重新渲染 rhandsontable
- azure-devops - Azure DevOps 服务中的时间表