我如何 return 地图功能中的 http 标签做出反应
how do i return http tags in map function react
我正在尝试构建一个具有多个级别的动态条形图。所以我使用地图函数来生成图表。我做控制台记录 var 和东西,它工作正常。但是标签的 return 不呈现。我尝试简单 div {<div>Hey</div>
} 但它也没有呈现。
这是我的代码,
import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';
export const LocalBarChart =({config, data})=>{
//data :- [{name: 'X Axis Name', levelOneName: levelOneValue, levelTwoName: levelTwoValue} , {name: 'X Axis Name', levelOneName: levelOneValue, levelTwoName: levelTwoValue}];
//config :- {numberOfLevel: (1-10) , COLORS : ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']}; // 0 means full filled piechart, 0<x<50 ->liner circle
const COLORS = config.COLORS;
let keysArray=Object.keys(data[0]);
return(
<BarChart width={600} height={300} data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="6 0"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
{ data.map((e, i) => {
if(i===0){
console.log(e);
keysArray.map((datas,indexs)=>{
if(datas!=="name"){
console.log(indexs)
console.log(datas)
return (
<Bar dataKey={datas} stackId="a" fill={COLORS[indexs]} />
);
}
})
}
}) }
{/* <Bar dataKey="pv" stackId="a" fill="#8884d8" />
<Bar dataKey="uv" stackId="a" fill="#82ca9d" />
<Bar dataKey={keysArray[1]} stackId="a" fill={COLORS[0]} /> */}
</BarChart>
);
}
请帮我弄清楚..谢谢
尝试在 keysArray.map((datas,indexs)=>{
之前添加 return
您需要 return inside map 才能获取数组。
当前您正在获取空值数组。
根据您的代码 - 您将获得二维数组。这就是你想要的!
您需要从地图 return 作为
return(
<BarChart width={600} height={300} data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="6 0"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
{ data.map((e, i) => {
if(i===0){
console.log(e);
return keysArray.map((datas,indexs)=>{
if(datas!=="name"){
console.log(indexs)
console.log(datas)
return (
<Bar dataKey={datas} stackId="a" fill={COLORS[indexs]} />
);
}
})
}
}) }
{/* <Bar dataKey="pv" stackId="a" fill="#8884d8" />
<Bar dataKey="uv" stackId="a" fill="#82ca9d" />
<Bar dataKey={keysArray[1]} stackId="a" fill={COLORS[0]} /> */}
</BarChart>
);
希望对您有所帮助
我正在尝试构建一个具有多个级别的动态条形图。所以我使用地图函数来生成图表。我做控制台记录 var 和东西,它工作正常。但是标签的 return 不呈现。我尝试简单 div {<div>Hey</div>
} 但它也没有呈现。
这是我的代码,
import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';
export const LocalBarChart =({config, data})=>{
//data :- [{name: 'X Axis Name', levelOneName: levelOneValue, levelTwoName: levelTwoValue} , {name: 'X Axis Name', levelOneName: levelOneValue, levelTwoName: levelTwoValue}];
//config :- {numberOfLevel: (1-10) , COLORS : ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']}; // 0 means full filled piechart, 0<x<50 ->liner circle
const COLORS = config.COLORS;
let keysArray=Object.keys(data[0]);
return(
<BarChart width={600} height={300} data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="6 0"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
{ data.map((e, i) => {
if(i===0){
console.log(e);
keysArray.map((datas,indexs)=>{
if(datas!=="name"){
console.log(indexs)
console.log(datas)
return (
<Bar dataKey={datas} stackId="a" fill={COLORS[indexs]} />
);
}
})
}
}) }
{/* <Bar dataKey="pv" stackId="a" fill="#8884d8" />
<Bar dataKey="uv" stackId="a" fill="#82ca9d" />
<Bar dataKey={keysArray[1]} stackId="a" fill={COLORS[0]} /> */}
</BarChart>
);
}
请帮我弄清楚..谢谢
尝试在 keysArray.map((datas,indexs)=>{
之前添加 return
您需要 return inside map 才能获取数组。
当前您正在获取空值数组。
根据您的代码 - 您将获得二维数组。这就是你想要的!
您需要从地图 return 作为
return(
<BarChart width={600} height={300} data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="6 0"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
{ data.map((e, i) => {
if(i===0){
console.log(e);
return keysArray.map((datas,indexs)=>{
if(datas!=="name"){
console.log(indexs)
console.log(datas)
return (
<Bar dataKey={datas} stackId="a" fill={COLORS[indexs]} />
);
}
})
}
}) }
{/* <Bar dataKey="pv" stackId="a" fill="#8884d8" />
<Bar dataKey="uv" stackId="a" fill="#82ca9d" />
<Bar dataKey={keysArray[1]} stackId="a" fill={COLORS[0]} /> */}
</BarChart>
);
希望对您有所帮助