reactjs - 在图表内 react 径向渐变填充

Question

我正在研究 LED/Meter 风格的视觉效果:https://codesandbox.io/s/clever-almeida-1275n?file=/src/App.js
我的最终目标是达到这样的目标
如您所见，它使用径向类型的渐变进行填充。
我是否能够在我的代码中实现这一点，或者是否有一个可以轻松支持这一点的库？

 <div className="App" style={{ textAlign: "left" }}>
      <span style={{ color: "white" }}>Track A</span>

      <MeterBar
        // height={"50px"}
        value={32}
        ledTotal={50}
        orientation="horizontal"
        ranges={[
          { min: 0, max: 30, color: "green" },
          { min: 31, max: 45, color: "orange" },
          { min: 46, max: 50, color: "red" }
        ]}
      />

Answer 1

不需要外部库，只需向对象范围添加一个值即可。 example
应用

{
  min: 0,
  max: 30,
  color: "green",
  gradient: "radial-gradient(hsl(99, 100%, 45%) 20%, hsl(99, 100%, 20%) 100%)"
}

MeterBar

style={{
   minHeight: "100%",
   background: ledRange?.color ? ledRange.gradient : "grey",
   margin: "1px",
   flexGrow: 1,
   opacity: value >= idx ? 1 : 0.3,
   borderRadius: "1px"
}}