javascript - 在React Components中模拟数据

我正在为图表使用数据夹具（使用Recharts）

看这里

const charts = [
  {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
  {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
  {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
  {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
  {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
  {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
  {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];

然后我有ChartGrid组件，我想在其中显示每个单个图表

export default class ChartsGrid extends React.Component{

  render() {

    return (
      <div className="grid">
        {this.props.charts.map((chart, i) => <Chart {...this.props} key={i} i={i} chart={chart} />)}
      </div>
    )
  }
};

这是单个图表组件

export default class Chart extends React.Component {

  render () {
    const { charts, i} = this.props;
    return (
        <LineChart width={600} height={300} data={charts}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis dataKey="name"/>
       <YAxis/>
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend />
       <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
       <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    );
  }
};

一切正常，请参阅带有代表相同数据的7个图表的图像



如何更改数据固定装置，以使该数据仅包含单个图表元素？

最佳答案

因此，这里的问题是，当您使用Charts.map时，您要告诉反应为Charts数组中的每个项目渲染一个单独的图表组件，但是将整个Charts数组作为用于图形的数据进行传递。

这一点正在这样做

{this.props.charts.map((chart, i) => <Chart {...this.props} key={i} i={i} chart={chart} />)}

因此，您要告诉它以与数组中的项目数量相同的次数呈现相同的图表。

如果您只想绘制一张图表，则可以执行以下操作：

return (
  <div className="grid">
    <Chart {...this.props} key={0} i={0} />
  </div>
)

或者，如果您要呈现不同数据的许多不同图表，则需要将Charts数组包装在另一个数组中。

我可能会更具体一些，请参见下面的示例，稍微调整一下设置

数据

const charts = [
  {
    name: 'Graph 1',
    data: [
      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
    ]
  },
];

然后ChartsGrid

export default class ChartsGrid extends React.Component{

  render() {

    return (
      <div className="grid">
        {this.props.charts.map((chart, i) => <Chart key={i} chart={chart} />)}
      </div>
    )
  }
};

单图

export default class Chart extends React.Component {

  render () {
    const { chart } = this.props;
    return (
      <LineChart width={600} height={300} data={chart.data}
        margin={{top: 5, right: 30, left: 20, bottom: 5}}>
        <XAxis dataKey="name"/>
        <YAxis/>
        <CartesianGrid strokeDasharray="3 3"/>
        <Tooltip/>
        <Legend />
        <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    );
  }
};