reactjs - 使用谷歌图表的动态数据

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

由于您将 Array 传递给dataprop，因此您不需要在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' }}
        />
    )
}