2

我正在创建一个 BMI 计算器，我正在尝试创建一个量具，以便它反映 BMI。我正在使用一个使用“react-gauge-chart”的量具，它是这样渲染的

   <GaugeChart
        id="gauge-chart"
        percent={gageCalc()}
        nrOfLevels={3}
        colors={["#FFFF00", "#228B22", "#FF0000"]}
      />

这是gageCalc()和我使用的字典：

  const gageCalc = () => {
    try {
      var c = [Math.round(calcBMI())];
      var x = dict[Math.round(calcBMI())];
      if (c < 16) return 0.0;
      if (c > 30) return 1;
      return x;
    } catch (e) {
     // does nothing right now
    }
  };

var dict = {
    16: 0.0,
    17: 0.16,
    18: 0.33,
    19: 0.4,
    20: 0.4,
    21: 0.5,
    22: 0.5,
    23: 0.5,
    24: 0.66,
    25: 0.66,
    26: 0.7,
    27: 0.825,
    28: 0.825,
    29: 0.9,
    30: 1,
  };

字典有点工作，但不是最准确的。我只是尽可能地分散百分比。 calcBMI()简单地返回人的 BMI。所以我的问题是仪表的指针是使用基于从返回的值的百分比设置的gageCalc()。除了我的字典，我不知道如何使BMI计上的指针准确。

例如，如果某人的 BMI 为 22，那么他们的 BMI 是正常的，并且指针将位于仪表的绿色区域，但如果他们的 BMI 为 28，那么我需要将指针落在红色区域。这是仪表的样子：我的体重指数计

这是我正在关注的图表：

Underweight (yellow) = Below 18.5
Healthy Weight (green) = 18.5 to 24.9
Overweight (red) = 30 or greater

有没有一个公式可以为我做到这一点？有没有更好的量规我可以使用，或者我的字典是最好的方法。谢谢！

4

2 回答 2

1

好的，你的一些信息是矛盾的，所以我做了一些假设，并试图用我的常识来解决差异，我做了以下假设

  • 16 bmi 在图表上转换为 0%
  • 30 bmi 在图表上转换为 100%

我已经采取了门槛

  • 16-18.5 = 体重过轻（黄色）
  • 18.5-25 = 健康（绿色）
  • 25-30 = 超重（红色） - 我扩展了这个界限，因为你提供的信息有差距

我们必须将这些范围中的每一个都视为图表自身的 33%，因此我们试图计算介于 0-33、33-66 和 66-100 之间的特定值。

这意味着您的视觉表示会在一定程度上扭曲数据，但是从其他要求来看，这似乎是必需的。

我所拥有的是我为每个细分市场提出的基本公式

if (bmi >= lowerBoundary && < 上边界)

return (bmi - lowerBoundary) / (upper boundary - lowerBoundary) / a third to get 33% based answer然后根据您所在的段添加修饰符（0、0.33 或 0.66）

这给了我以下 if 块

 const gageCalc = bmi => {
    var result = 0;
    if (bmi >= 16 && bmi <= 18.5) {
      result = getPercentage(bmi, 16, 18.5, 0);
    } else if (bmi > 18.5 && bmi < 25) {
      result = getPercentage(bmi, 18.5, 25, 0.33);
    } else if (bmi >= 25 && bmi <= 30) {
      result = getPercentage(bmi, 25, 30, 0.66);
    }
    return result;
  };

  function getPercentage(bmi, lowerBound, upperBound, segmentAdjustment) {
    return (
      (bmi - lowerBound) / (upperBound - lowerBound) / 3 + segmentAdjustment
    );
  }

我有这个代码的演示，你的 react-chart-guage 准备在这里玩

于 2020-07-09T21:35:35.483 回答
0

一种选择如下：

Underweight (yellow) = Below 18.5 --> 0-33%
Healthy Weight (green) = 18.5 to 24.9 --> 34-67%
Overweight (red) = 25 or greater --> 67 - 100%

如果你均匀地绘制 BMI，你可以说 0% 是 12.1，100% 是 31.3（我把绿色区域的差异加/减到黄色/红色。）

那么你的数学是

if(BMI>31.3){
    x=100%
} else if (BMI<12.1){
    x=0%
} else {
    x= ((BMI -12.1)/19.2) * 100%
}

19.2是上面的 max/min 之间的差异。

于 2020-07-09T21:43:01.743 回答