反应-highcharts：改变翼片

说明反应-highcharts：改变翼片

当画布大小改变我有一个Highcharts线图中的“进度”标签（标签是一个反应的自举选项卡）。当我打开“进度”选项卡时，图表显示为宽度为100％，这很好。当我切换到不同的选项卡时，回到“进度”选项卡，图表的宽度从100％变为固定的600像素。我浏览了文档，包括官方的Highcharts和React-Highcharts，都找不到解决方案。

我想象一下组件的重新渲染有问题。

代码

highchart-line.js：

export default class HighChartLine extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { config: undefined }; // or use null 
    } 

    getScoreData(eqId){ 

     const self = this; 
     let url = 'src/data/dermatology/user_scores-eq' + eqId + ".json"; 
     axios.get(url) 
      .then((response) => { 
       ... //response informs 
       let config = {...}; 

       self.setState({ config: config }); 
      }); 
    } 

    componentWillMount(){ 
     this.getScoreData(this.props.equation.eqId); 
    } 
    componentWillReceiveProps(nextProps){ 
     this.getScoreData(nextProps.equation.eqId); 
    } 

    render(){ 
    // Handle case where the response is not here yet 
    if (!this.state.config) { 
     return <div>Loading...</div> 
    } 

    if (this.state.config.length === 0) { 
     return <div>Sorry, no data was found for this equation.</div>; 
    } return (
      <ReactHighcharts config={this.state.config} /> 
     ) 
    } 
}

highchart行被导入进度，tab.js：

const ProgressTab = ({equation, user}) => { 
    return(
      <HighChartLine equation={equation} user={user} /> 
) 
}; export default ProgressTab;

进度标签被导入模式-main.js：

export default class ModalMain extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      tabKey: this.props.tabKey 
     }; 
    } 
    handleSelect = (tabKey) => { 
     this.setState({ tabKey: tabKey }); 
    }; 
    render() { 
     return (
      <Tabs activeKey={this.state.tabKey} 
         onSelect={this.handleSelect} 
      > 
       <Tab tabClassName="main-tab" eventKey={"progress"} > 
        <ProgressTab {...this.props} /> 
       </Tab> 
       <Tab tabClassName="main-tab" eventKey={"peer-compare"}> 
        <PeerCompareTab {...this.props}/> 
       </Tab> 
      </Tabs> 
     ) 
    } 
}

个

浏览器渲染

宽度正确设置为100％

宽度变化本身600px的

来源

2016-04-08 Nico

你能发布现场的例子，像jsFiddle？如果图表没有所需的大小或者没有正确安装，那么你可以使用['chart.reflow（）']（http://api.highcharts.com/highcharts#Chart.reflow） –

我有完全相同的问题！我发现如果你调整窗口的大小，它会在选项卡中正确调整大小（就像你一样，第一个选项卡的图表很好，但其他选项卡实际上更短）。这很烦人，因为我希望它在所有选项卡中使所有图表具有相同的宽度，而无需手动调整任何大小。我将根据上述评论者的建议开展工作并进行测试...... – jflay

虽然这可能有点疼的表现，我发现，如果我不及格在isPureConfig={true}中插入ReactHighcharts组件，它将在选项卡上重新渲染。由于ReactHighcharts默认设置isPureConfig={false}，Highcharts默认会自动重排，因此它会全部重新调整大小。缺点是你有你的图表重新渲染每次工作：https://github.com/kirjs/react-highcharts#limiting-highchart-rerenders

当然，我不能肯定它是什么更好的回流每个选项卡上的图表选择反正...

来源

2016-05-17 18:39:48 jflay

反应-highcharts：改变翼片

回答

相关问题