ReCharts标签位置不工作

Question

我已经创建了一个线图，并试图定位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>

Answer 1

有四件事需要检查：

1. 在第二个ReferenceLine中有一个错误。它应该是myData，而不是mydata。
2. 在x中使用ReferenceLine数字意味着您正在绘制数字，但默认情况是“类别”。将type='number'添加到<XAxis/>
3. 对于X轴dataKey，有一个空字符串.应该用实际的键替换它。
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>
        )
    }
}