0

我正在尝试将数据从VictoryChart. 实现图表非常容易。要实现饼图，您所要做的就是以下...

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

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

现在，在我的状态下，我有一个叫做pie_dataand的东西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>
    );
  }

映射函数按预期工作，我已经对其进行了测试，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]})]; 
                                                                                                   | ^

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

4

1 回答 1

2

代替

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]}

这里函数试图从箭头函数返回一个对象文字。这将始终返回未定义。由于解析器不会将两个大括号解释为对象文字，而是作为块语句。括号强制它解析为对象文字。希望这可以帮助

于 2018-07-31T18:43:50.037 回答