我使用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
);
}
});