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

问题描述

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

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.

我有:

this.chart.zoomOutOnDataUpdate = true; 

但这没有效果.

谢谢.

推荐答案

为此，我在react组件中添加了以下内容:

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

}

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

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