在数据更新时重置 amcharts3-react 的缩放答案

【问题标题】：Resetting zoom on amchart3-react at data update在数据更新时重置 amcharts3-react 的缩放
【发布时间】：2017-03-01 00:58:27
【问题描述】：

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

我正在重新绘制图表：

 <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>

我的数据道具被切片以包含/排除数据。在数据包含上，数据呈现在图表中，但是图表仍以上一级缩放，用户必须在所选数据可见之前缩小。我只希望缩放级别最大程度地缩小数据更新。

我有：

this.chart.zoomOutOnDataUpdate = true;

但这没有效果..

谢谢。

【问题讨论】：

你能解释一下为什么你使用带括号的dataProvider={this.props.data()}吗？好像没有正确地将数据绑定到图表上，而是只执行了一次这个数据函数。

标签： reactjs amcharts

【解决方案1】：

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

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();
     }
   }

}

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

【讨论】：