reactjs - 如何在reactjs中将id属性添加到radial-gauge（或如何将100％的宽度和高度设置为仪表）

Question

我在 Reactjs 中使用 canvas-gauges。当我尝试渲染直接画布时，它不会渲染画布，所以我使用了<RadialGauge units='km/h'>反应组件。在这里，我无法为仪表设置 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>

标签： reactjscanvashtml5-canvas