Javascript 如何在没有硬编码的情况下有效地传递谷歌图表中的数据?
所以我的代码运行得非常好我的数组语法正确一切都很好 但我发现自己在JSX中手动硬编码数据,您可以使用Javascript 如何在没有硬编码的情况下有效地传递谷歌图表中的数据?,javascript,arrays,reactjs,react-google-charts,Javascript,Arrays,Reactjs,React Google Charts,所以我的代码运行得非常好我的数组语法正确一切都很好 但我发现自己在JSX中手动硬编码数据,您可以使用 我最近做过一个类似的项目。我通过AJAX获取JSON数据,然后需要构建自己的函数以Google图表接受的形式创建数据 不必在data属性中硬编码该数据,只需创建一个需要以正确格式生成数组的函数即可。然后,该函数应该返回所需的数据,并在数据属性中使用它 您的硬编码方法很好,但是将其转换为函数,您就会很好。我所做的是将数据存储在状态中,以防数据发生更改。我正在转换数据arr包含所需的所有信息我将添加
我最近做过一个类似的项目。我通过AJAX获取JSON数据,然后需要构建自己的函数以Google图表接受的形式创建数据 不必在data属性中硬编码该数据,只需创建一个需要以正确格式生成数组的函数即可。然后,该函数应该返回所需的数据,并在数据属性中使用它 您的硬编码方法很好,但是将其转换为函数,您就会很好。我所做的是将数据存储在状态中,以防数据发生更改。我正在转换数据arr包含所需的所有信息我将添加一个arr包含内容的片段,请稍候
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
data={[
[
'Element',
'Density',
{ role: 'style' },
{
sourceColumn: 0,
role: 'annotation',
type: 'string',
calc: 'stringify',
},
],
...arr
]}