如何解决演示如何在折线图中显示具有不同数据集的附加对角线
我想做的是以下事情:
但是我无法使其正常运行。我能够从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 }]
现在可以了
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。