【React chart.js】如何使用地图功能向雷达图添加多个数据

问题描述

我想弄清楚如何使用地图功能将多个数据放入雷达图。 我选择了一些相关的代码如下。

class TopPage_Comp extends Component{
  constructor(props){
    super(props)
    this.state = {
      motivationtypeTestRecords: []
    }
  }

  componentDidMount() {
    const id = this.state.user.id
    fetch("http://localhost:8080/test/" + id,{
      method: "GET"
    })
    .then((response) => {
      response.json().
      then(json => {
        const types = json.motivationtypeList
        this.setState(
          {
            motivationtypeTestRecords: records,}
        )
      })
    })
  }

  render() {

    const backgroundColors = [
      'rgba(255,99,71,0.35)','rgba(0,128,'rgba(255,255,0.35)'
    ];

    const borderColors = [
      'rgba(255,1)',1)'
    ];

return(
      <>
            {this.state.motivationtypeTestRecords.length > 0 &&
              <MotivationtypeChart
                scores={this.state.motivationtypeTestRecords}
                backgroundColors={backgroundColors}
                borderColors={borderColors}
               />
            }
      </>
    )
  }
}


export class MotivationtypeChart extends Component {
  constructor(props){
    super(props);
  }

  render(){
    return(
      <Radar
        data={{
          labels: ['Drive','Volunteer','Create','Analyze'],datasets:[
            {this.props.scores.map((s,index) =>
              {
                label: s.createdDate,data: [
                  s.drivescore,s.volunteerscore,s.createscore,s.analyzescore
                ],backgroundColor: this.props.backgroundColors[index],borderColor: this.props.borderColor[index],borderWidth: 2
              },)}
          ]
        }}
        height={400}
        width={500}
        options={{
          maintainAspectRation: false,scale: {
            grid: {
              display: false
            },beginAtZero: true,min: 0,max: 20,stepSize: 1,}
        }}
      />
    )
  }
}

我正在使用 react-chartjs-2。 当它在 MotivationtypeChart 组件上调用 this.props.scores 时，错误反复说意外的关键字“this”。 首先不允许在 datasets 数组中使用 map 函数吗？ 或者有什么办法可以解决这个问题？ 我非常感谢像这里的人这样的熟练程序员的建议。

解决方法

我认为您是直接在数组中使用 map，所以这就是为什么它向您显示错误的原因，而且它不是这样创建数据的好方法。

因此，请尝试创建将返回数据的新函数，然后在 dataSets 图表中使用该函数作为 Radar 返回

export class MotivationtypeChart extends Component {
  constructor(props){
    super(props);
  }

  const getRadarData = () => {
    return this.props.scores.map((s,index) => {
      return {
        label: s.createdDate,data: [s.driveScore,s.volunteerScore,s.createScore,s.analyzeScore],backgroundColor: this.props.backgroundColors[index],borderColor: this.props.borderColor[index],borderWidth: 2
      };
    });
  };

  render(){
    return(
      <Radar
        data={{
          labels: ['Drive','Volunteer','Create','Analyze'],datasets:[...getRadarData()]
        }}
        height={400}
        width={500}
        options={{
          maintainAspectRation: false,scale: {
            grid: {
              display: false
            },beginAtZero: true,min: 0,max: 20,stepSize: 1,}
        }}
      />
    )
  }
}