使用多条线的ReCharts

Question

使用多条线的ReCharts

10

我想创建一个 ReChart 组件，其中包含多条线。

目前我有这个虚拟代码。

<LineChart
  data={data}
  margin={{
    top: 16,
    right: 16,
    bottom: 0,
    left: 24
  }}
>
  <XAxis dataKey="time" />
  <YAxis>
    <Label angle={270} position="left" style={{ textAnchor: "middle" }}>
      Cyber assesment
    </Label>
  </YAxis>
  <Line type="monotone" dataKey="amount" stroke="#556CD6" dot={false} />
</LineChart>

数据是一个数组，其中包含两个值的对象：

function createData(time, amount) {
  return { time, amount };
}

const data = [
  createData('00:00', 0),
  createData('03:00', 300),
  createData('06:00', 600),
  createData('09:00', 800),
  createData('12:00', 1500),
  createData('15:00', 2000),
  createData('18:00', 2400),
  createData('21:00', 2400),
  createData('24:00', undefined),
];

我希望能够绘制多条线，我尝试创建了不同的函数并将其他数据添加到相同的数组中，但是没有好的结果。

如何实现这一目标？

我尝试创建一个可行的示例，但是没有成功。

function createData(amountA, amountB) {
  return {a: amountA, b: amountB  };
}

const data = [
  createData(100, 200),
  createData(200, 400),
  createData(400, 500),
  createData(600, 800),
  createData(650, 700),
  createData(900, 800)
];

export default function Chart() {
    console.log(data)
  return (
    <React.Fragment>
      <Title>Performance indication</Title>
      <ResponsiveContainer>
        <LineChart
          data={data}
          margin={{
            top: 16,
            right: 16,
            bottom: 0,
            left: 24,
          }}
        >
          <XAxis dataKey="time" />
          <YAxis>
            <Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
              Cyber assesment
            </Label>
          </YAxis>
          <Line type="monotone" dataKey={data.a} stroke="#556CD6" dot={false} />
          <Line type="monotone" dataKey={data.b} stroke="#556CD6" dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </React.Fragment>

- Kristoffer Tølbøll

我不确定我理解你的问题。如果你想绘制多条线，你需要在你的数据对象中添加key （请参见 https://jsfiddle.net/alidingling/xqjtetw0/）。 - 7hibault

2个回答

6

最新版本现在可以直接在组件中添加数据。

像这样使用不同数据集的Recharts多条线

const data = [
      {name: 'Page A', uv: 4000, amt: 2400},
      {name: 'Page B', uv: 3000, amt: 2210},
      {name: 'Page C', uv: 2000, amt: 2290},
      {name: 'Page D', uv: 2780, amt: 2000},
      {name: 'Page E', uv: 1890, amt: 2181},
];
const data2 = [
      {name: 'Page A', pv: 2400, amt: 2400},
      {name: 'Page B', pv: 1398, amt: 2210},
      {name: 'Page C', pv: 9800, amt: 2290},
      {name: 'Page D', pv: 3908, amt: 2000},
];

 <Line data={data} type="monotone" dataKey="uv" stroke="#8884d8"/>
 <Line data = {data2} type="monotone" dataKey="pv" stroke="#82ca9d"/>

示例

- Ahad Khwaja

1

我认为以前这样做可以，但是作为参考，那个小提琴图（和我的代码）的x轴长度是应该的两倍 - 也就是说，它不是[1,2,3]而是[1,2,3,1,2,3]。我还没有找到一个非常规方法来解决它。 - HammerN'Songs

我遇到了和@HammerN'Songs一样的问题。你使用了哪些黑科技？ - flp

@flp 抱歉，我们最终选择了reaviz，它只需要数据以特定格式呈现即可，虽然最终可以实现，但我不知道它是否具有像recharts那样平滑线条的能力。 - HammerN'Songs

1

XAxis有allowDuplicatedCategory={false}的设置，可以解决这个问题。 - Random2017

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dupocas · Accepted Answer

只需在您的 LineChart 中声明两个 Line 和两个 YAxis 组件，并明确声明 yAxisId。以下是我们其中一个示例：

<LineChart data={data} margin={{ left: -10, right: 10 }}>
    <XAxis height={40} dataKey="part" tick={{ fontSize: 10 }}>
        <Label
            value='Período'
            position='insideBottom'
            fontSize={14}
            fill='#676767'
        />
    </XAxis>
    <YAxis width={80} yAxisId="left" tick={{ fontSize: 10 }}>
        <Label
            value={selected.A}
            angle={-90}
            position='outside'
            fill='#676767'
            fontSize={14}
        />
    </YAxis>
    <YAxis width={80} yAxisId="right" orientation="right" tick={{ fontSize: 10, }}>
        <Label
            value={selected.B}
            angle={-90}
            position='outside'
            fill='#676767'
            fontSize={14}
        />
    </YAxis>
    <Tooltip formatter={(value) => floatParser(value)} />
    <Line yAxisId="left" type="monotone" dataKey={selected.A} stroke={colors[1]} />
    <Line yAxisId="right" type="monotone" dataKey={selected.B} stroke={colors[0]} />
</LineChart>

data 数组：

const data = [
    { part: 'foo', axisA: 21211, axisB: 1232 }
]