如何在Reactjs中将服务器端Json数据转换为react-google图表格式

Question

我有来自后端的以下输出

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

我想将以下数据转换为谷歌图表格式，然后将其显示在reactjs中的饼图上。

这是我第一次使用谷歌图表，我真的不知道如何进行转换。根据我在网上读到的内容，我实际上可以做一些类似的事情

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 中的新状态

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

以下是一些示例状态：

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

您需要几次数组操作来创建正确的数据状态。工作样品：https://codesandbox.io/s/react-google-charts-column-chart-forked-spjmz?file=/src/index.js:577-845