折线图的 Rechart 动画从右侧引入线
Rechart animation for linechart bringing in lines from right side
开始在 React 中使用 Recharts,我觉得自己快要疯了!所有教程和示例代码线图都有这个漂亮整洁的动画,感觉就像是从右向左绘制线。但是,我已经设置好了,出于某种原因,动画中折线图上的线条从右侧浮动。我有以下行为的 gif:
我摆弄过动画选项(缓动、缓入、ETC)、持续时间、启用或禁用动画等。无论我做什么,它总是从右边飘进来。
有一种方法可以使图表正确地自行绘制 - 如果我将它放在高度为 0 的 div 中,然后手动将高度更改为 600px,则动画将在预期的方式,否则我会得到奇怪的浮动右侧线。
如上所述,这是一个 React 应用程序,我的折线图的渲染代码包含在下面。
render() {
let linesToRender = [];
for(let i = 0; i < this.props.driverNames.length; i++) {
let lineColor;
if(this.props.driverNames[i].current_score < 0) {
lineColor = 'red'
} else {
lineColor = 'green'
}
linesToRender.push(
<Line animationDuration={5000} type='montone' dataKey= . {this.props.driverNames[i].display_name} stroke={lineColor} />
)
console.log(this.props.driverNames[i])
}
return(
<ResponsiveContainer width="100%" height="100%">
<LineChart data={this.props.data} height={600} width={1000}>
{linesToRender}
<XAxis dataKey="date" padding={{left: 30, right: 30}}/>
<YAxis/>
<Tooltip/>
<Legend />
</LineChart>
</ResponsiveContainer>
)
}
想知道是否有其他人遇到过这个问题或可以提供任何指导。
我遇到了这个问题。在我的情况下,我用 data=[]
初始化了我的图表,它很快填充了我通过 api 请求检索到的实际数据。
为了让我的图表正确呈现而不是像你说的那样从侧面飞进来,我完全阻止了图表呈现,直到我确定我有我的数据数组。也许你可以做一些像
{this.state.data.length > 0 &&
<LineChart data={this.state.data} >
</LineChart>
}
开始在 React 中使用 Recharts,我觉得自己快要疯了!所有教程和示例代码线图都有这个漂亮整洁的动画,感觉就像是从右向左绘制线。但是,我已经设置好了,出于某种原因,动画中折线图上的线条从右侧浮动。我有以下行为的 gif:
我摆弄过动画选项(缓动、缓入、ETC)、持续时间、启用或禁用动画等。无论我做什么,它总是从右边飘进来。
有一种方法可以使图表正确地自行绘制 - 如果我将它放在高度为 0 的 div 中,然后手动将高度更改为 600px,则动画将在预期的方式,否则我会得到奇怪的浮动右侧线。
如上所述,这是一个 React 应用程序,我的折线图的渲染代码包含在下面。
render() {
let linesToRender = [];
for(let i = 0; i < this.props.driverNames.length; i++) {
let lineColor;
if(this.props.driverNames[i].current_score < 0) {
lineColor = 'red'
} else {
lineColor = 'green'
}
linesToRender.push(
<Line animationDuration={5000} type='montone' dataKey= . {this.props.driverNames[i].display_name} stroke={lineColor} />
)
console.log(this.props.driverNames[i])
}
return(
<ResponsiveContainer width="100%" height="100%">
<LineChart data={this.props.data} height={600} width={1000}>
{linesToRender}
<XAxis dataKey="date" padding={{left: 30, right: 30}}/>
<YAxis/>
<Tooltip/>
<Legend />
</LineChart>
</ResponsiveContainer>
)
}
想知道是否有其他人遇到过这个问题或可以提供任何指导。
我遇到了这个问题。在我的情况下,我用 data=[]
初始化了我的图表,它很快填充了我通过 api 请求检索到的实际数据。
为了让我的图表正确呈现而不是像你说的那样从侧面飞进来,我完全阻止了图表呈现,直到我确定我有我的数据数组。也许你可以做一些像
{this.state.data.length > 0 &&
<LineChart data={this.state.data} >
</LineChart>
}