无法通过自定义点 react gauge speedometer

Question

我正在使用 npm 包 react-d3-speedometer 创建一个基于点数的自定义仪表。根据包中提供的故事，如果将 0 到 1000 的值传递给属性 customSegmentValues，它会正常工作。但是我需要渲染值范围从0.5到1.5，它不起作用。

这是相同的代码沙箱：

https://codesandbox.io/s/suspicious-maxwell-ofw1k

所有我得到的错误：First value should be equivalent to min value given. Current min value - 0。

如果不使用 customSegment 属性并直接传递 min={0.5}, max={1.5} 是可行的，但由于我需要为段传递自定义颜色，因此我需要使用此自定义属性。解决此问题的任何帮助表示赞赏。提前致谢。

Answer 1

您需要使用正确的道具，即 minValue 和 maxValue。（不是最小最大值）

Working demo

代码片段

   <ReactSpeedometer
        forceRender={true}
        needleHeightRatio={0.9}
        needleColor={"black"}
        needleTransition={"easeCircleInOut"}
        maxSegmentLabels={12}
        segments={12}
        customSegmentStops={[
          0.5,
          1,
          0.6,
          0.7,
          0.8,
          0.9,
          1.0,
          1.1,
          1.2,
          1.3,
          1.4,
          1.5
        ]}
        minValue={0.5}//<---here
        maxValue={1.5}//<---here
        segmentColors={[
          "Lime",
          "LawnGreen",
          "GreenYellow",
          "DodgerBlue",
          "DeepSkyBlue",
          "SkyBlue",
          "DarkOrange",
          "Orange",
          "OrangeRed",
          "Red",
          "blue",
          "Red"
        ]}
        value={1.2}
      />

无法通过自定义点 react gauge speedometer

Unable to pass custom points react gauge speedometer

javascript

gauge

reactjs