Question

我正在尝试将数据从VictoryChart输入到饼图中。实现图非常容易。要实现pie graph，您需要做的是......

<VictoryPie
  data={[
    { x: "Cats", y: 35 },
    { x: "Dogs", y: 40 },
    { x: "Birds", y: 55 }
  ]}
/>

注意data格式，它是某种[{...},{...}]关联数组的数组

现在，在我的状态下，我有一个名为pie_data和pie_keys的东西。本质上，pie_data只是一个对象...

{
  "Fac of Engineering & Appl Sci": 8.557902403495994,
  "Faculty of Arts and Science": 53.775188152464196,
  "Faculty of Education": 13.085700412721534,
  "Faculty of Health Sciences": 7.75673707210488,
  "Faculty of Law": 8.07234765719835,
  "Not Faculty Specific": 0.30347171643602816,
  "School of Business": 5.8994901675163876,
  "School of Graduate Studies": 2.537023549405195,
  "School of Religion": 0.012138868657441126
}

和pie_keys只是查找值...

 ["Fac of Engineering & Appl Sci", "Faculty of Arts and Science", etc.]

pie_keys仅用于在pie_data中查找值。因此，从本质上讲，如果我想创建一个饼图，我将开始实现以下内容...

<VictoryPie
  data={[
    { x: "Fac of Engineering & Appl Sci", y: 8.557902403495994 },
    { x: "Faculty of Arts and Science", y: 53.775188152464196 },
    { x: "Faculty of Education", y: 13.085700412721534 },
    ...
    ...
  ]}
/>

但是我不能只是手动进行。我需要从状态值中提取它们。所以我尝试了以下...

render() {
    const data_distribution = [this.state.pie_keys.map((d) => {x:d, y:this.state.pie_data[d]})];
    return (
      <div className="App">
        <VictoryPie
          data = {data_distribution}
        />
      </div>
    );
  }

map函数按预期工作，我已经对其进行了测试，x是键值，y是与该键关联的值。但是，我的问题是以预期的data_distribution格式返回[{x:.., y:...}, {x:..., y:...}, etc.]。当我尝试上面的示例时，我收到一条错误消息...

Syntax error: Unexpected token, expected ; 
(57:69) 55 | 56 | render() { > 57 | const data_distribution = [this.state.pie_keys.map((d) => {x:d, y:this.state.pie_data[d]})]; 
                                                                                                   | ^

如何将正确的格式输入到饼图中？

Answer 1

替换

const data_distribution = [this.state.pie_keys.map((d) => {x:d, y:this.state.pie_data[d]})];

使用

const data_distribution = this.state.pie_keys.map((d) => ({x:d, y:this.state.pie_data[d]}));

首先有两个问题。Array.map本身返回一个 Array 。因此，无需将 data_distribution 包装在[]中。

第二个问题在线附近

(d) => {x:d, y:this.state.pie_data[d]}

此函数尝试从Arrow Function返回对象文字。这将始终返回undefined。由于解析器不会将两个花括号解释为对象文字，而是将其解释为块语句。括号会强制将其解析为对象文字。希望这会有所帮助

无法在React中渲染数据

1 个答案: