2

我一直在研究 react-grid-layout 以在屏幕上显示和移动图形。目前我能够将 plotly.js 图添加到容器中。它是可移动的，但不会随容器调整大小。我想知道是否需要一个异步函数来允许在调整容器框大小时重新渲染绘图。下面是网格布局的代码，以及直方图的代码。

const ReactGridLayout = WidthProvider(Responsive);

const Dash = (props) => {
  const { value, addItem } = props
  const ref = useRef()

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
        <ReactGridLayout
          className="layout"
          onLayoutChange={(e) => console.log(props.layout)}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
          resizeHandles={['s', 'w', 'e', 'n', 'sw', 'nw','se', 'ne']}
          verticalCompact={false}
          // onDragStart={'.dragbackground'}
          // isDraggable={false}
          draggableHandle=".dragHandle"
               
      >        
        {_.map(value, (item, i) => (
          <div id = 'gridID' ref={ref} key={i} data-grid={props.layout[i]}  onClick={() => props.updateLayout(props.layout[i])}>
            <span className='dragHandle'>Drag From Here</span>
            <br/>
            <DashItem  key={i} >
              {item}
            </DashItem>
            <span className='dragHandle'>Drag From Here</span>
          </div>
        ))}
        </ReactGridLayout>
    </div>
  );
}


Dash.propTypes = {
  value: PropTypes.array,
  onIncreaseClick: PropTypes.func.isRequired
}


const mapStateToProps = (state) => {
  return {
    value: state.count,
    layout: state.layout,
    onLayoutChange: state.onLayoutChange,
  };
};

const mapDispatchToProps = dispatch => { 
  return {
    addItem: () => dispatch({type: actionTypes.ADD_GRID_ITEM}),
    updateLayout: (i) => dispatch({type: actionTypes.UPDATE_LAYOUT, layoutId: i}),
    removeItem: (i) => dispatch({type: actionTypes.REMOVE_ITEM, layoutElId: i})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dash);

以下是使用 plotly.js 的直方图代码：

export default function Histogram(props) {

  const { width, height, ref } = useResizeDetector({
    //
  })

  const layout = props.layout

  return(   
    <div style={{height: '100%', width: '100%'}}> 
      <Plot
      useResizeHandler = {true}
      ChartComponent = {Histogram}
      callback={(chart) => this.setChart(chart)}
      style={{width: "100%", height: "100%"}}
      config={{responsive: true}}
      data={[
        {
          x: d1,
          type: 'histogram',
          marker: {
            colour: 'red',
            opacity: 0.5
          },
        },
        {
          x: d2,
          type: 'histogram',
          marker: {
            colour: 'blue',
            opacity: 0.5
          }
        }
      ]}
      layout={{   
        ...layout,
        height: height,
        width: width,
        autosize:true,
        margin: {
          l: 50,
          r: 50,
          b: 100,
          t: 100,
          pad: 4
        },
        title: 'Histogram Title',
          barmode: 'stack',
          bargap: 0.05,
          bargroup: 2,
          xaxis: {
            title: 'X Axis Title'
          },
          yaxis: {
            title: 'Frequency',
            automargin:true
          }}}
      style= {{
        display: 'flex',
        alignItems: 'center',
      }}
      config= {{
      responsive: true 
      }}  
      />
    </div>   
  )
};

我用来将图形元素输入到网格中的 Redux reducer：

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case actionTypes.ADD_GRID_ITEM:
            const id = uuid()
            console.log("adding: " + id)
            return{
                ...state,
                count: state.count.concat(<Histogram/>),
                layout: state.layout.concat({
                    i: `${id}`,
                    x: 2,
                    y: 0,
                    w: 4,
                    h: 5
                }),
            }
4

2 回答 2

2

我刚刚构建了类似的东西，对我有用的是使用react-resize-detector将绘图包装在带有 ref 的 div 中，以便它始终以响应窗口调整大小和拖动调整大小但仍与反应布局网格。这是我使用的绘图组件：

import { useResizeDetector } from 'react-resize-detector'
import Plot from 'react-plotly.js'
export default function ResponsivePlot(props) {
  const { width, height, ref } = useResizeDetector({ 
    // refreshMode: 'debounce', 
    // refreshRate: 1000
  })
  const { layout, layers } = props
  return (
    <div ref={ref} style={{ display: 'flex', height: '100%' }}>
      <Plot
        data={layers}
        layout={{
          ...layout, 
          ...{
            width: width, 
            height: height
          }
        }}
      />
    </div>
  )
};

用法：

import ResponsivePlot from './ResponsivePlot'

//...other stuff 

<ResponsivePlot layers={layers} layout={layout} />
于 2021-02-07T00:22:20.307 回答
0

为什么不设置图表容器（网格布局子组件）的 ID，并且在调整其大小时只需获取容器（即网格布局子组件/网格项）的新高度和宽度并将其传递给图表。我也在做同样的事情，它在所有断点上都能完美运行。

于 2022-02-15T11:06:19.160 回答