Resetting zoom on amchart3-react at data update

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/40130490/resetting-zoom-on-amchart3-react-at-data-update