使用recharts的多系列数据条形图问题答案

【问题标题】：multi series data bar chart problem using recharts使用recharts的多系列数据条形图问题
【发布时间】：2020-06-16 06:23:33
【问题描述】：

所以我创建了这个数据：

const dummy = [
    {
      name:'hello',
      style:'#57c0e8',
      data: [
        { day: 23, value: 100 },
        { day: 24, value: 110 },
        { day: 25, value: 115 },
        { day: 26, value: 112 },
        { day: 27, value: 108 },
        { day: 28, value: 95 },
        { day: 29, value: 99 },
        { day: 30, value: 89 },
        { day: 31, value: 124 },
      ]
    },
{
      name:'Good Day',
      style:'#57c0e8',
      data: [
        { day: 23, value: 80 },
        { day: 24, value: 83 },
        { day: 25, value: 65 },
        { day: 26, value: 72 },
        { day: 27, value: 79 },
        { day: 28, value: 93 },
        { day: 29, value: 96 },
        { day: 30, value: 91 },
        { day: 31, value: 46 },
      ]
    }
]

我尝试了什么：

<BarChart
        width={500}
        height={300}
        data={dummy}
        margin={{
          top: 5, right: 30, left: 20, bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="day" type="category" />
        <YAxis dataKey="value" type="number"/>
        <Tooltip />
        <Legend />
        <Bar dataKey="value" fill="#8884d8" />
<Bar dataKey="value" fill="green" />
      </BarChart>

我认为我输入的数据类型适合 recharts cz 我用折线图尝试过，效果很好，但是当我用条形图尝试时效果不佳，为什么？

【问题讨论】：

标签： reactjs bar-chart recharts

【解决方案1】：

BarChart 属性data 应该是数组而不是对象文档https://recharts.org/en-US/api/BarChart#data

尝试修改您的 dummy 变量，删除内部的 data 属性

const dummy = [
  {
    name:'hello',
    style:'#57c0e8',
    day: 23, value: 100
  },
  {
    name:'hello',
    style:'#57c0e8',
    day: 24, value: 110
  },
  {
    name:'hello',
    style:'#57c0e8',
    day: 25, value: 115
  },
  ...
  {
    name:'Good Day',
    style:'#57c0e8',
    day: 23, value: 80
  },
  {
    name:'Good Day',
    style:'#57c0e8',
    day: 24, value: 83
  }
  ...
]

【讨论】：

【解决方案2】：

我为以后遇到同样问题的人解决了我的问题：

<BarChart
        width={1000}
        height={300}
        data={systolicAndDiastolicAndPulseAverage}
        margin={{
          top: 5, right: 30, left: 20, bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="5 0" tickSize={15} />
        <XAxis dataKey="day" type="category" tickLine={false} allowDuplicatedCategory={false}/>
        <YAxis dataKey="value" type="number"  allowDuplicatedCategory={false}/>
        <Tooltip />
        <Legend />
        {systolicAndDiastolicAndPulseAverage.map(s => (
            // console.log(s)
          <Bar dataKey="value" data={s.data} name={s.name} fill={s.style}/>          
       ))}
      </BarChart>

【讨论】：