图表没有响应-react-plotly.js

Question

我已经使用react-plotly.js实现了一个散点图，我希望图表在页面布局更改时能够自动调整大小。但是目前，图表的布局本身并未改变。如果我在图表上明确执行某些功能以强制图表重新绘制自身，则仅图表宽度会发生变化。

我应用了useResizeHandler属性，并将autosize设置为true。但这也没有任何区别。

<Plot
   useResizeHandler
   style={{ width: '100%' }}
   data={chartData}
   onClick={(data) => this.handlePlotClick(data)}
   type={'scatter'}
   layout={this.layout} />

 const layout = {
      autosize: true,
      dragmode: true,
      margin: {
        l: 5,
        r: 5,
        t: 10,
        b: 10,
        pad: 0,
        autoexpand: true
      },
      hovermode: 'closest',
      hoverlabel: {
        bgcolor: 'rgba(0,0,0,1)',
        bordercolor: 'rgba(200,200,200,1)'
      },
      height: '650',
      yaxis: {
        visible: false
      },
      xaxis: {
        autorange: false,
        showline: true,
        fixedrange: false, // true disables range selection on main graph
        rangeslider: {
          range: this.state.sliderRange,
          visible: true,
          borderwidth: 1,
          bordercolor: '#000'
        }
      }
    };
  }

如您在上面的屏幕截图中所见，div.svg容器的宽度与main-svg的宽度相同。但是它仍然在右侧留有空白。我无法调试为什么会那样。如果我在图表上明确执行缩放以重绘该图，则它将正常运行。但是我希望它在页面布局更改时自动调整大小。

Answer 1

我也被困在这个问题上。尝试http://codrate.com/questions/how-can-trigger-the-window-resize-event-manually-in-javascript

的window.dispatchEvent（new Event（'resize'））

当我通过拖动来调整图表大小时，我正在调用resizeHandler。

resizeHandler = () => {
    this.child.resizeHandler();
    window.dispatchEvent(new Event('resize'));
}

调整图表大小时，图表始终会自动缩放，因此基本上可以在更改图表大小时触发窗口调整大小。因此，对于您来说，当您检测到页面布局更改时，可以触发窗口调整大小。