如何解决如何在 Reactjs 中将服务器端 Json 数据转换为 react-google-chart 格式
我的后端有以下输出
[
{
"_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 中的新状态
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,}}
我希望得到任何帮助。
解决方法
以下是一些示例状态:
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。