javascript - React-google-charts，ColumnChart 返回未处理的拒绝错误 : Failed to set DataTable from data props

Question

我正在尝试从 react-google-charts 渲染一个 ColumnChart https://rakannimer.github.io/react-google-charts/#/examples/ColumnChart?_k=xit9kl

渲染时，控制台记录错误:

Unhandled rejection Error: Failed to set DataTable from data props !

和

Uncaught TypeError: this.dataTable.getNumberOfRows is not a function

我相信我的 Prop 格式正确...

    <Chart
      chartType='ColumnChart'
      data={this.formatData()}
      graph_id=''
      width='100%'
      height='500px'
      legend_toggle
    />

formatData() 返回以下数据结构...

Array[2]
  0:Array[3]
    0:"Crime Category"
    1:Array[63]
    2:Object
  1:Array[33]
    0:Array[65]
      0:"Vikings"
      1:0
      2:0
      3:0
      4:0
      5:7
      ...

这似乎完全符合文档中规定的数据结构，看起来像这样......

  "data":[
    [
      "Genre",
      "Fantasy & Sci Fi",
      "Romance",
      "Mystery/Crime",
      "General",
      "Western",
      "Literature",
      {"role":"annotation"}
    ],
    ["2010",10,24,20,32,18,5,""],
    ["2020",16,22,23,30,16,9,""],
    ["2030",28,19,29,30,12,13,""]
  ]

Answer 1

我误读了数据结构。通过返回所有项目的数组而不是 2 个项目的数组，其余属性嵌套在这些项目中，问题得到了解决。这是工作代码...

const columns = teamList.map(team => {
  const newArray = Object.keys(team['teamCrimeCategorySum'])
    .sort()
    .map(key => {
      return team['teamCrimeCategorySum'][key]
    })
  return [`${team.name}`, ...newArray, '']
}) 

return [
  [
    'Crime Category',
    ...categories.map(category => `${category.name}`),
    {'role':'annotation'}
  ],
  ...columns
]