使用谷歌图表的动态数据答案

【问题标题】：Using dynamic data for google charts使用谷歌图表的动态数据
【发布时间】：2020-07-04 03:19:48
【问题描述】：

我正在创建一个我的 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],
                
            ]}

它不起作用。任何人都知道该怎么做。非常感谢任何帮助。谢谢

【问题讨论】：

标签： reactjs react-google-charts

【解决方案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' }}
        />
    )
}

【讨论】：