渲染多色分段进度条答案

【问题标题】：Rendering a multi-colored segmented progress bar渲染多色分段进度条
【发布时间】：2017-01-27 10:13:06
【问题描述】：

这样的分段进度条：

我正在 React 中开发一个分段进度条，它将动态渲染多达 15 个药丸形状的 svg，就像图片中显示的那样。我遇到的问题是算法将填充有适当颜色的段渲染到完成百分比，同时用默认的“空”颜色渲染剩余的药丸形状。任何方向或帮助将不胜感激。

【问题讨论】：

老兄，stackoverflow 不适合人们为您编写代码。你必须尝试过一些事情，然后人们可以帮助你解决错误或棘手的问题 - 当你写一些东西时，你可能会让自己感到惊讶，它可能会起作用 :) 但这里有一个提示：colors = ['red','yellow', '绿色']; thisPillColor= 完成？颜色[Math.floor(counter/5)]: '灰色';
@FrazerKirkman，感谢您的评论和建议。老实说，我并没有要求任何人为我编写代码。我正在尝试的事情没有成功。我只是寻求一些帮助来解决我正在尝试解决的问题。
所以堆栈溢出的想法是你发布你尝试过的代码
我们需要能够准确地看到你在想什么，所以我们知道在哪里纠正它:)

【解决方案1】：

伪代码中的可能逻辑：

for i = 0 to 14
    ratio = i / 14
    if CurrentValue >= ratio 
       drawPill(i-th position, AppropriateColor[i])  
    else
       drawPill(i-th position, DefaultGrayColor)

【讨论】：