来自服务器的数据时图例重叠
class SearchContentChart extends React.Component {
constructor(props) {
super(props);
}
render() {
const loadLines = data => data.map((item) => {
return <Line type="monotone" key={item.key} dataKey={item.key} name={item.name} stroke={item.color} dot={null}/>
});
return (
<ResponsiveContainer height={ 300 }>
<LineChart data={this.props.data.data || []}>
<XAxis dataKey="name"/>
<YAxis />
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip />
<Legend/>
{loadLines(this.props.data.line || [])}
</LineChart>
</ResponsiveContainer>
)
}
}当组件第一次渲染图例重叠但从下一次渲染开始图表效果良好时。
当我从服务器端获取数据时，如何使其在第一次渲染时工作？
class SearchContentChart extends React.Component {
constructor(props) {
super(props);
}
render() {
const loadLines = data => data.map((item) => {
return <Line type="monotone" key={item.key} dataKey={item.key} name={item.name} stroke={item.color} dot={null}/>
});
return (
<ResponsiveContainer height={ 300 }>
<LineChart data={this.props.data.data || []}>
<XAxis dataKey="name"/>
<YAxis />
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip />
<Legend/>
{loadLines(this.props.data.line || [])}
</LineChart>
</ResponsiveContainer>
)
}
}When the component first rendering legend is overlapping but from the next rendering the chart works well.
How can I make it working at the first rendering when I get data from the server side?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
将 debounce={1} 设置为 ResponsiveContainer 对我有用。
Setting debounce={1} to the ResponsiveContainer worked for me.