如何从json访问图表中的颜色？

问题描述

我在图表中使用条形图

const data = [
  { name: 'Page A',uv: 4000,pv: 2400,color:'yellow',amt: 2400 },];

const SimpleBarChart = (data) => ({
  return (
    <BarChart
      width={600}
      height={300} data={data}
      margin={{ top: 5,right: 30,left: 20,bottom: 5 }}
    >
      <Cartesiangrid strokeDasharray="3 3"/>
      <XAxis dataKey="name"/>
      <YAxis/>
      <Legend />
      <Bar dataKey="pv" fill={data.color} />
    </BarChart>
  );
})

我想使用json中的颜色。填写代码的语法应该是什么？

解决方法

为了获得存储在 ╔════════╦══════════════╦ ║BatchID ║ UserName ║ ╠════════╬══════════════╬ ║ 1 ║ xxx,yyy,zzz ║ ║ 2 ║ aaa ║ ║ 3 ║ bbb ║ ║ 4 ║ ccc,ddd ║ ║ ║ ║ ╚════════╩══════════════╩ 数组的第一个元素中的颜色值，您只需要编写以下内容：

data

因为<Bar dataKey="pv" fill={data[0].color} /> 不产生任何值，因为它不存在。

,

您可以通过执行此操作直接与数组对话；

let data = [
  { 
    name: 'Page A',uv: 4000,pv: 2400,color:'yellow',amt: 2400 
  }
];

console.log(data[0].name)

OR 
by looping through the array doing this;

for(let i=0; i<data.length; i++){
  console.log(data[i].name)
}