如何在不进行硬编码的情况下有效地在 react-google-charts 中传递数据？

Question

所以我的代码运行得非常好我的数组语法正确一切都很好

但我发现自己 硬编码 手动 JSX 中的数据（在

问题

现在我有 20 个元素，我必须手动对其进行硬编码，这不是很有效..有更好的方法吗？

import React from 'react'
import Chart from "react-google-charts"
import {useSelector} from 'react-redux'
const Graph = () => {

    const products = useSelector(state => state.products)

    const colors = ['#51e2f5','#9df9ef','#edf756','#ffa8B6','#a28089','#a0d2eb','#e5eaf5','#d0bdf4','#8458B3','#a28089']
    for(var i=0;i<10;i++) {
        products[i].color = colors[i]
    }
    for(i =10;i<20;i++) {
        products[i].color = colors[i-10]
    }
    const arr = products.map((prod) => {
        return [prod.productName,parseInt(prod.price),prod.color,null]
    })

    return (
        <Chart
        {...console.log(arr[0])}
            width={'500px'}
            height={'300px'}
            chartType="BarChart"
            loader={<div>Loading Chart</div>}
            data={[
                [
                    'Element',
                    'Density',
                    { role: 'style' },
                    {
                        sourceColumn: 0,
                        role: 'annotation',
                        type: 'string',
                        calc: 'stringify',
                    },
                ],
                // ['Copper', 8.94, '#b87333', null],
                // ['Silver', 10.49, 'silver', null],       // this is the data format expected
                // ['Gold', 19.3, 'gold', null],
                // ['Platinum', 21.45, 'color: #e5e4e2', null],

                [arr[0][0],arr[0][1],arr[0][2],arr[0][3]],
                [arr[1][0],arr[1][1],arr[1][2],arr[1][3]],      // i want to do this 20 times i.e first index goes till 20 (now going till 3)
                [arr[2][0],arr[2][1],arr[2][2],arr[2][3]],
                [arr[3][0],arr[3][1],arr[3][2],arr[3][3]],


            ]}
            options={{
                title: 'Density of Precious Metals, in g/cm^3',
                width: 600,
                height: 400,
                bar: { groupWidth: '95%' },
                legend: { position: 'none' },
            }}
            // For tests
            rootProps={{ 'data-testid': '6' }}
        />
    )
}

export default Graph

Answer 1

您可以使用the spread operator

   data={[
            [
                'Element',
                'Density',
                { role: 'style' },
                {
                    sourceColumn: 0,
                    role: 'annotation',
                    type: 'string',
                    calc: 'stringify',
                },
            ],

            ...arr


        ]}

Answer 2

我最近在做一个类似的项目。我通过 AJAX 获取 JSON 数据，然后需要构建我自己的函数以 Google Chart 接受的形式创建数据。

与其在数据属性中硬编码该数据，不如简单地创建一个需要以正确格式生成数组的函数。然后那个函数应该 return 你需要的数据并在数据属性.

中使用它

您的硬编码方法很好，但将其转换为函数就没问题了。我所做的是将数据存储在状态中，以防万一数据发生变化。

如何在不进行硬编码的情况下有效地在 react-google-charts 中传递数据？

How to pass data in react-google-charts effectively without hardcoding?

javascript

arrays

reactjs

react-google-charts