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

Posted 2023-02-18

【中文标题】图表没有响应-react-plotly.js

【英文标题】：Chart not being responsive -react-plotly.js

【发布时间】：2019-09-26 16:49:17

【问题描述】：

我已经使用 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-container 与 main-svg 具有相同的宽度。但它仍然在右侧留下空白。我无法调试它为什么会这样。如果我明确地在图表上执行缩放以重绘绘图，那么它将正常运行。但我希望它在页面布局更改时自动调整大小。

【参考方案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'));

调整图表大小时图表总是自动缩放，所以我基本上在图表大小改变时触发窗口调整大小。因此，对您而言，当您检测到页面布局更改时，您可以触发窗口调整大小。

【讨论】：

我似乎还没有提到它，但是有一个名为“响应”的绘图配置选项可以设置为 true 以帮助处理动态图表大小。 plot.ly/javascript/responsive-fluid-layout 提到这“对手机有用！”所以我怀疑它是在考虑横向/纵向模式切换的情况下制作的。所以窗口的resize事件似乎触发了图表维度的重新计算。