ReCharts 标签位置不起作用
ReCharts label position not working
我创建了一个折线图并尝试在其上放置 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>
要检查的四件事:
你的第二个 ReferenceLine
有错别字。它应该读作 myData
,而不是 mydata
。
您在 ReferenceLine
中使用 x
的数字意味着您正在绘制数字,但默认值为 'categories'。将 type='number'
添加到 <XAxis/>
X-Axis dataKey
有一个空字符串。它应该替换为实际密钥。
您为参考线指定标签的语法是错误的。您只需说 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>
)
}
}
我创建了一个折线图并尝试在其上放置 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>
要检查的四件事:
你的第二个
ReferenceLine
有错别字。它应该读作myData
,而不是mydata
。您在
ReferenceLine
中使用x
的数字意味着您正在绘制数字,但默认值为 'categories'。将type='number'
添加到<XAxis/>
X-Axis
dataKey
有一个空字符串。它应该替换为实际密钥。您为参考线指定标签的语法是错误的。您只需说
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>
)
}
}