使用 JSON Data React 创建饼图

Question

我有一个数组，其中包含一个名为 Status 的键，它有两个值，1 是好的，另一个是坏的我正在使用 react-google-charts 我在下面上传了我的代码，请检查并帮助我

JSON:

[
    {
        Status: 'Good'
    },
    {
        Status: 'Bad'
    },
    {
        Status: 'Bad'
    },
    {
        Status: 'Good'
    },
    {
        Status: 'Good'
    },
    {
        Status: 'Bad'
    },
    {
        Status: 'Good'
    }
]

我的 React 代码：

import React from 'react';
import Chart from 'react-google-charts';
import axios from 'axios';

export default class chart extends Component {
    constructor() {
        super();
        this.state = {
            items: []
        };
    }

    componentDidMount() {
        axios.get('http://localhost:5000/items').then(response => this.setState({ items: response.data }));
    }

    render() {
        return (
            <div>
                <Chart
                    width={'500px'}
                    height={'300px'}
                    chartType="PieChart"
                    loader={<div>Loading Chart</div>}
                    data={[['Task', 'Status of Items'], ['Good', 4], ['Bad', 3]]}
                    options={{
                        title: 'Item Status'
                    }}
                    rootProps={{ 'data-testid': '1' }}
                />
            </div>
        );
    }
}

目前我在这里硬编码了值：

    data={[
        ['Task', 'Status of Items'],
        ['Good', 4],
        ['Bad', 3],
      ]}

我想使用 API 在上面的代码中添加好坏之分我试图找到数组的长度，但它没有用，它发现整个数组值既不好也不坏。请帮助我

Answer 1

首先，您可以 reduce 将 Good 和 Bad 计为单个 JSON 并且然后使用 Object.entries 获取数组中所需的格式。

这样试试

<Chart
    width={'500px'}
    height={'300px'}
    chartType="PieChart"
    loader={<div>Loading Chart</div>}
    data={[
        ['Task', 'Status of Items'],
        ...Object.entries(
            this.state.items.reduce((prevValue, currValue) => {
                prevValue[currValue.Status] =
                    prevValue[currValue.Status] === undefined ? 1 : prevValue[currValue.Status] + 1;
                return prevValue;
            }, {})
        )
    ]}
    options={{
        title: 'Item Status'
    }}
    rootProps={{ 'data-testid': '1' }}
/>

代码沙箱 => https://codesandbox.io/s/busy-wind-1bizj?file=/src/App.js

使用 JSON Data React 创建饼图

Create Pie Chart Using JSON Data React

charts

reactjs

react-google-charts