为 google 个图表使用动态数据

Question

我正在像这样创建我的 googlecharts：

            <Chart 
            width={'inherit'}
            height={'400px'}
            chartType={'PieChart'}
            loader={<div>Loading Data...</div>}
            data={[
                ['Stats', 'All Stats'],
                ['Submitted', 3],
                ['Reviewed', 5],
                ['Approved', 3],
                ['Rejected', 2],
                
            ]}
            options={{title: 'Statistics'}}
            rootProps={{'data-testid' : '1'}} 
        />

使用硬编码数据，它起作用了，我得到了图表。但是，我想使用我在组件中获得的动态值，如下所示：

const statList = stats && stats.length

当我这样做时：

            data={[
                ['Stats', 'All Stats'],
                ['Submitted', {statList} ],
                ['Reviewed', 5],
                ['Approved', 3],
                ['Rejected', 2],
                
            ]}

没用。任何人都知道如何去做。非常感谢任何帮助。谢谢

Answer 1

由于您要将数组传递给 data 属性，因此 statList 两边不需要括号。只需删除它们就可以了。

这是一个小例子：

const chart = () => {

    const submitted = ['john', 'hopkins', 'junior']

    const data = [
        ['Stats', 'All Stats'],
        ['Submitted', submitted.length],
        ['Reviewed', 5],
        ['Approved', 3],
        ['Rejected', 2],
    ];

    return (
        <Chart
            width={'inherit'}
            height={'400px'}
            chartType={'PieChart'}
            loader={<div>Loading Data...</div>}
            data={data}
            options={{ title: 'Statistics' }}
            rootProps={{ 'data-testid': '1' }}
        />
    )
}

为 google 个图表使用动态数据

Using dynamic data for google charts

reactjs

react-google-charts