如何將服務器端 Json 數據轉換為 Reactjs 中的 react-google-chart 格式

Question

我有以下 output 來自我的后端

[
    {
        "_id": null,
        "counts": [
            {
                "department": "Cleaning",
                "number": 1
            },
            {
                "department": "Engineering",
                "number": 2
            },
            {
                "department": "Transportation",
                "number": 1
            }
        ]
    }
]

我想將以下數據轉換為谷歌圖表格式，然后將其顯示在 reactjs 的餅圖上。

這是我第一次使用 google-charts，我真的不知道如何進行轉換。 根據我在網上閱讀的內容，我實際上可以做這樣的事情

class ChartPie extends React.Component {
state={
  data:[]
}
componentDidMount(){
  
axios.get(`/api/v1/employee/departCount`)
.then(({data}) => { // destructure data from response object
    // {department,number} from data
    const restructuredData = data.map(({department, number}) => 
        [department,number])

    this.setState({data: restructuredData});
})
.catch(function (error) {
  console.log(error);
})
}

如果是這種情況，那么我的另一個挑戰將是如何利用谷歌圖表 API 中的新 state

 render() {
    return (
      <div>
      <Chart
  width={'500px'}
  height={'300px'}
  chartType="PieChart"
  loader={<div>Loading Chart</div>}
  data={[
  
  // how do I add the new state ?
  ]}
  options={{
    title: 'Work data',
    is3D: true,
  }}

我將不勝感激任何幫助。

Answer 1

這是一些示例 state 應該如下所示：

const data = [
  ["Element", "Density", { role: "style" }],
  ["Copper", 8.94, "#b87333"], // RGB value
  ["Silver", 10.49, "silver"], // English color name
  ["Gold", 19.3, "gold"],
  ["Platinum", 21.45, "color: #e5e4e2"] // CSS-style declaration
];

您需要進行幾次數組操作來創建正確的數據 state。 工作示例： https://codesandbox.io/s/react-google-charts-column-chart-forked-spjmz?file=/src/index.js:577-845