gpt4 book ai didi

reactjs - ReCharts 标签位置不起作用

转载 作者:行者123 更新时间:2023-12-03 14:19:14 24 4
gpt4 key购买 nike

我创建了一个折线图,并尝试在其顶部放置 2 个标签,但没有成功。我在开头和结尾使用了 2 条引用线,以及它们上面的标签。我正在努力实现以下目标:

L1     L2
|
|_______

代码:

<ResponsiveContainer height={300} width="100%">
<LineChart data={myData}>
<ReferenceLine x={0} label={{value:"L1", position:"top"}} />
<ReferenceLine x={mydata.length-1} label={{value:"L2", position:"top"}}/>
<XAxis dataKey=" " />
<YAxis />
<Line type="monotone" dataKey="value" stroke="#8884d8" />
</LineChart>
</ResponsiveContainer>

最佳答案

需要检查的四件事:

  1. 您的第二个 ReferenceLine 有错字。它应该是 myData ,不是mydata .

  2. 您使用的号码为 x在你的ReferenceLine意味着您正在绘制数字,但默认为“类别”。添加type='number'<XAxis/>

  3. X 轴有一个空白字符串 dataKey 。应将其替换为实际 key 。

  4. 您为引用线指定标签的语法是错误的。你只需说label="L1" 。 AFAIK,你无法指定它的位置。它总是在行的中间结束。

将所有这些放在一起,您的代码应如下所示:

class RefLine extends React.Component{

render(){
const myData = [{x:-2, value:5}, {x:3, value:10}, {x:5, value:11}];
return (
<ResponsiveContainer height={300} width="100%">
<LineChart data={myData}>
<ReferenceLine x={0} label="L1"/>
<ReferenceLine x={myData.length-1} label="L2"/>
<XAxis dataKey="x" type="number"/>
<YAxis />
<Line type="monotone" dataKey="value" stroke="#8884d8" />
</LineChart>
</ResponsiveContainer>
)
}
}

关于reactjs - ReCharts 标签位置不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48605806/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com