在数据更新时重置 amchart3-react 的缩放 [英] Resetting zoom on amchart3-react at data update

问题描述

如何在数据更新时重置图表缩放.我正在使用 amcharts 并做出反应:https://github.com/amcharts/amcharts3-react

我正在重新绘制图表:

我的数据道具被切片以包含/排除数据.在数据包含时，数据呈现在模具图表中，但图表仍会在前一级别放大，用户必须缩小才能看到所选数据.我只希望缩放级别最大程度地缩小数据更新.

我有:

this.chart.zoomOutOnDataUpdate = true;

但这没有效果..

谢谢.

解决方案

为了实现这一点，我在 react 组件中添加了以下内容:

componentWillReceiveProps(nextprops){if(this.props.data !== nextprops.data){this.setState({zoomoutflag: true})}别的{this.setState({zoomoutflag: false})}如果(下一个道具)this.chart = this.initChart(nextprops);}componentDidUpdate(){如果(this.refs.chartref && this.state.zoomoutflag){如果(this.refs.chartref.state.chart){this.refs.chartref.state.chart.zoomOut();}}

}

这对我来说效果很好，现在每次在我的情况下通过过滤器更改更新数据时，都会设置 zoomoutflag 并将图形设置为缩小状态.

How can I reset the chart zoom when data updates. I'm using amcharts and react: https://github.com/amcharts/amcharts3-react

i'm redering the chart with:

 <div className='row' id={this.props.tileid} style={{height: '80%', width: '100%'}} >
    <AmCharts ref={`chart_${this.props.tileid}`} {...this.chart} dataProvider={this.props.data()} />
 </div>

Where my data prop is sliced to include/exclude data. On data include, the data renders in die chart, however the chart is still zoomed at the previous level and users must zoom out before the selected data becomes visible. I just want the zoom level to max zoom out on data update.

I have:

this.chart.zoomOutOnDataUpdate = true; 

but this has no effect..

Thanks.

解决方案

To achieve this I added the following to the react component:

componentWillReceiveProps(nextprops){
  if(this.props.data !== nextprops.data){
     this.setState({zoomoutflag: true})
  }else{
     this.setState({zoomoutflag: false})
  }
  if(nextprops)
     this.chart = this.initChart(nextprops);
}

componentDidUpdate(){
   if(this.refs.chartref && this.state.zoomoutflag){
     if(this.refs.chartref.state.chart){
       this.refs.chartref.state.chart.zoomOut();
     }
   }

}

This worked well for me, now every time the data is updated via filter change in my case, the zoomoutflag is set and the graph is set to zoomed out state.

这篇关于在数据更新时重置 amchart3-react 的缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！