如何在div resize的highchart中使用chart.setSize?

时间:2017-08-28 05:01:40

标签: javascript html css highcharts

I am having paper component on drag of paper the chart in the paper is not getting resize on div. On window resize its working fine. I want with div resize chart should resize

我使用reactgridlayout来生成高级图表以及拖放。当拖动容器时,容器中的图表没有调整大小。只有在窗口调整大小时才能正常工作。我需要在div调整大小。我使用了chart.setSize(null,null);

_loadSavedChart(){
   return (
      <ResponsiveReactGridLayout layouts={this.state.layout} 
        onLayoutChange={this.onLayoutChange}
        className={this.state.className}            
        rowHeight={this.state.rowHeight}
        cols={this.state.cols}
        initialLayout= {this.state.layout}
        initialWidth={this.state.initialWidth}
        width={this.state.width}
        verticalCompact={false}
        listenToWindowResize={false}
        currentBreakpoint= 'sm'
        >
      {this.state.savedChartinDashboard.map((data, i) => 
      <Paper key={i} className="c3chart" style={style.chartPaperStyle} 
       Depth={1}>{this._renderChart(data)}
      </Paper>
      )} 
    </ResponsiveReactGridLayout> )
  }

OnLayout更改我正在传递chart.setSize(null,null)仍然无法正常工作如何根据div调整大小使用chart.setSize进行图表调整大小。

  onLayoutChange(layout) {

   console.log(layout);
   chart.setSize(null, null);
   }

当div(容器)调整大小时,它只在窗口调整大小时正在调整大小

从下面的代码中,您可以检查reactgridlayout的组件是否为draggable而不是文章中的图表。在窗口调整其工作正常,我需要与div调整大小(在纸张组件的draf)。

我需要在react组件中使用它而不是在jquery中。我有一个onLayoutChange方法。如何利用这种方法。

$('#resizer').resizable({
// On resize, set the chart size to that of the
// resizer minus padding. If your chart has a lot of data or other
// content, the redrawing might be slow. In that case, we recommend
// that you use the 'stop' event instead of 'resize'.
resize: function () {
    chart.setSize(
        this.offsetWidth - 20,
        this.offsetHeight - 20,
        false
    );
}

});

0 个答案:

没有答案