0

这是我对径向量规的反应代码。我将高度保持为 100%,但当我调整容器大小时,它仍然不会随之调整大小。我正在使用react-grid-layout包来创建可调整大小的小部件。

const radialOptions = {
    pointer:{ value: this.state.oee }
}
    
<div className="d-flex align-items-center unique" style={{ height: "100%" }}>
    <RadialGauge
        id="guage1"
        scale={{
            labels: { color: "#a1a8b8" },
            majorTicks: { color: "#a1a8b8" },
            minorTicks: { color: "#a1a8b8" },
            ticksColor: "#a1a8b8"
        }}
        style={{ width: "50%", height: "100%" }}
        {...radialOptions}
    />
    <div className="rad-text ml-4">
        <p style={{ fontSize: "16px", fontWeight: 600 }}>Title</p>
        <h3 className="mt-3">{this.state.data ? this.state.data.toFixed(2) : 0}%</h3>
    </div>
</div>

当我检查 DOM 时,它显示了这一点。我什至瞄准了 div 并添加了样式,但它仍然在 DOM 中显示 280px 和 208px,但在样式部分它显示 100%,但 Gauge 的高度没有改变。

在此处输入图像描述

在此处输入图像描述

当容器像这样调整大小但仪表仍然是相同大小时,还尝试了 Jquery 来调整大小。提前致谢 !!

$("#guage1").resize();
4

0 回答 0