Question

我在Reactjs中使用画布规。当我尝试渲染直接画布时，它没有渲染画布，因此我使用了<RadialGauge units='km/h'> react组件。在这里，我无法为量规设置100％的高度和宽度。我不想将其设置为px。由npm install react-canvas-gauges

安装了以下软件包

<RadialGauge
  id='mycanvas'
  units='rpm'
  title='x1000 RPM'
  width={200}>
</RadialGauge>

具有px值的实际工作代码

<Row>
   <Col md="12" xl="12">
   <Card>
      <CardBody className="dashboard-card-widgets" >
         <Row>
            <Col md="6" xl="6">
            <RadialGauge
            units='rpm'
            title='x1000 RPM'
            width={200}
            height={200}
            value={3}
            minValue={0}
            maxValue={8}
            majorTicks={['0', '1','2','3','4','5','6','7','8']}
            minorTicks={5}
            borders={false}
            strokeTicks={true}
            highlights={[{from: "6", to: "8", color: "rgba(200, 50, 50, .75)"}]}
            ColorPlate={'#fff'}
            borderShadowWidth={0}
            needleType={'arrow'}
            needleWidth={3}
            needleCircleSize={7}
            needleCircleOuter={true}
            needleCircleInner={false}
            animationDuration={1500}
            animationRule={'linear'}
            fontNumbersSize={30}
            ></RadialGauge>
            </Col>
         </Row>
      </CardBody>
   </Card>
   </Col>
</Row>

渲染中的预期结果：

<canvas id="mycanvs" width="100%" height="100%"></canvas>

如何在React.js中向径向量规添加id属性（或如何为量规设置100％的宽度和高度）

0 个答案: