进度条动态着色

Question

我用Bootstrap进度条样式创建了一个表格，其中有一列名为“排名（Rank）”，包含从1到100的多个值。通过使用jquery和Bootstrap，我将这些值转换成进度条，如fiddle所示。代码运行良好，但问题在于颜色，当前显示的全部是蓝色，实际上我想要根据进度计数值显示不同的颜色，比如10 - 黄色，20 - 蓝色，35 - 红色等等，相同的值应该具有相同的颜色，否则应该是不同的颜色。颜色可以是动态的。

我的代码如下： JSFiddle

$("#table").children("tbody").children("tr").each(function (i) {
    var col = $(this).children("td.value");
    console.log(col.html());
    var pro = '<div id="left"><div class="progress" id="percentage"><div class="progress-bar" style="display: block; float: right;width: ' + col.html() + '%;"></div></div></div><div id="right">&nbsp;' + col.html() + '</div>';
    col.html(pro);
});

请问有人能告诉我解决这个问题的方法吗？

- Alex Man

---

尝试创建一个带有颜色的数组值，并比较数组值并动态获取颜色。 - Adeel Gill

如果是这样的话，我需要创建一个包含100种颜色的数组。 - Alex Man

是的，兄弟，你需要创建一个包含100种颜色的数组。我认为是这样的。 - Adeel Gill

Answer 1

查看此演示：http://jsfiddle.net/k1c9exLq/3/

首先创建一个包含100个不同动态颜色代码的数组，然后根据您的排名使用它们。

JQUERY

var genCol = [];
for (var i=0; i<=100; i++)
    genCol.push('#'+(Math.random()*0xFFFFFF<<0).toString(16));

$("#table").children("tbody").children("tr").each(function (i) {
    var col = $(this).children("td.value");
    
    var pro = '<div id="left"><div class="progress" id="percentage"><div class="progress-bar" style="display:block; float:right; width:'+col.html()+ '%;background:'+genCol[col.html()]+'"></div></div></div><div id="right">&nbsp;' + col.html() + '</div>';
    
    col.html(pro);
});

- yeyene

Answer 2

点击这里

HTML

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>

Bootstrap

{{链接1：Bootstrap}}

- Prashant

---

这不能应用，因为假设我有100行，所有进度条都应该具有动态颜色。 - Alex Man

Bootstrap进度条仅支持四种颜色，分别是.progress-bar-success、.progress-bar-info、.progress-bar-warning、.progress-bar-danger。 - Alex Man

Answer 3

在您的 jQuery 代码中，可以使用 if 语句。

if(col > 10) { $('.progressbar').css('background', 'yellow'); }

等等。

- Akshay Khetrapal

---

@Aksahy，我们如何根据1-100的值提供动态着色，使得值1的颜色不同于值2的颜色？ - Alex Man

好的，我没听懂那部分。请给我一点时间。 - Akshay Khetrapal

这不能直接实现。您可以尝试以下代码：var red = 0; var green = 0; var blue = 0; $(.progressbar).css('background', 'rgb(' + col*red + ', ' + col*green + ', ' + col*blue + ')');您可以根据需要更改红色、绿色和蓝色的值。假设col会动态变化，进度条的背景颜色也会随之动态变化。 - Akshay Khetrapal