javascript - 反应调整大小和缩放小部件javascript

Question

我想调整小部件及其内部内容的大小，同样，我也想缩放当前的小部件，我正在使用 React RND 库来调整大小，但我无法调整小部件的内部内容, 和缩放也不能正常工作

我的小部件在这里是一个绘图图，我正在使用 React-Chartjs2 库来显示该图，如果有人对此有所了解，请帮助我执行此操作

谢谢

    {w_data.type == 'plot' &&
                      <CCol xs="6" sm="6" lg="6" style={{ "marginTop": "20px" 
    }}>
    <Rnd
style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  position:"relative"

}}
className={widgetIndex==index ? 'boxShadow' : ''}
default={{
  x: 50,
  y: 5,
  width: graphStyle.width,
  height: graphStyle.height,
}}

onResizeStop={(e, direction, ref, delta, position) => {
  setgraphStyle({

    ...graphStyle,
    height:ref.offsetHeight,
    width:ref.offsetWidth
  })
  //chartReference.update()
}}
>
       
                            <CRow>

                            <CCol xs="6" sm="6" lg="6">
                              <CRow style={{'direction': 'ltr',"fontSize":"18px"}}>
                              {w_data.sensor_name}
                                </CRow>

                              </CCol>

                              {editModeView &&
                              <CCol xs="6" sm="6" lg="6"
                              style={{"margin-top": "-82px","position":"absolute"}}
                              >
                              <CRow style={{'direction': 'rtl'}}>
                                


                              <CIcon name="cil-trash"
                              onClick={()=>{
                                showDeleteModal(true)
                                setWidgetIndex(index)
                              }}
                              />
                              <CIcon
                                onClick={() => {
                                  setaddWidget(false)
                                  seteditWidget(true)
                                  setWidgetIndex(index)
                                  seteditWidgetType('plot')
                                                setwidgetDataEditTime(index)
                      setselectGraph('plot')
                      setshowAddeditPopover(true)
                                                }}
                                                id="Popover2"
                                name="cil-settings" />
                              
                                </CRow>

                              </CCol>
        }
                            </CRow>

            <div style={{ 'width': 
            graphStyle.width,'height': graphStyle.height}}>
                                    {console.log("GG", graphStyle)}
                              <Line data={w_data.graphData}
                                        ref={(reference) => chartReference = reference}
                                    //  width={graphStyle.width}
                                    //  height={graphStyle.height}
                                
                                    // onResize={(a,b)=>{

                                    //   console.log("a",a,b)
                                    // }}
                                        options={{
                                            maintainAspectRatio: false,
                                        responsive: true,
                                            legend: {
                                            position: 'bottom',
                                        },
                                      scales: {
                                          yAxes: [{
                                            ticks:{maxTicksLimit:5},
                                            
                                          }],
                                          xAxes: [{
                                            ticks:{maxTicksLimit:5},
                                            //type: 'realtime',
                                            realtime: {

                                              onRefresh: function(chart) {
                                                console.log("chart",chart)
                              
                                                chart.data.datasets.forEach(function(dataset) {
                              
                                                  dataset.data.push({
                              
                                                    x: Date.now(),
                              
                                                    y: Math.random()
                              
                                                  });
                              
                                                });
                              
                                              },
                              
                                              delay: 2000
                              
                                            }
                                          }]
                                         },
                                         pan: {
                                             enabled: true,
                                             mode: "xy",
                                             speed:10
                                         },
                                         zoom: {
                                             enabled: true,
                                             drag:false,
                                             mode: "xy",
                                             limits: {
                                                 max: 1,
                                                 min: 0.5,
                                             },
                                             rangeMin: {
                                                 x: 2,
                                                 y: 1,
                                             },
                                             rangeMax: {
                                                 x: 10,
                                                 y: 150,
                                             },
                                         }
                                  }}
                                    />                                                                                                      
                             
                            </div>

                          </Rnd>

                      </CCol>
                    }
                  </>

标签： javascriptreactjscharts