演示如何在折线图中显示具有不同数据集的附加对角线

问题描述

我想做的是以下事情：

但是我无法使其正常运行。我能够从2个不同的数据源中读取数据，但是由于某种原因，它无法在x轴上正确显示第二行。

这是示例代码：

import React from "react";
import { render } from "react-dom";

import { LineChart,Line,XAxis,YAxis,ReferenceLine } from "recharts";

const styles = {
  fontFamily: "sans-serif",textAlign: "center"
};

const data = [];

const maxBudget = 300;
for (let i = 0; i < 20; i++) {
  let d = {
    day: i,value: Math.random() * (maxBudget + 50) + 100
  };

  data.push(d);
}

const testline = [{ x: 0,y: 300 },{ x: 20,y: 0 }]

const App = () => (
  <div style={styles}>
    <LineChart
      width={500}
      height={300}
      
      margin={{ top: 5,right: 20,bottom: 5,left: 0 }}
    >
      <Line type="monotone" data={data} dataKey="value" stroke="#8884d8" dot={false} />
      <Line type="linear" data={testline} dataKey="y" stroke="#FF3333" dot={false} strokeWidth={2} />
      <XAxis dataKey="day" type="number" tickCount={11} />
      <YAxis />
      <ReferenceLine
        y={maxBudget}
        label={{
          position: "center",value: "Max budget"
        }}
        strokeDasharray="5 5"
      />
    </LineChart>
  </div>
);

render(<App />,document.getElementById("root"));

解决方法

好吧，我很傻。我只是自己发现的。有时您几天都看不到树木的木头了：（。

x值必须与XAxis中定义的值相同，因此我不得不将x：0更改为day：0：

const testline = [{ day: 0,y: 300 },{ day: 20,y: 0 }]

现在可以了