javascript - 我想根据值更改 JavaScript 进度条颜色

Question

我正在使用从 0 到 60 的计算值创建一个圆环图。基于 4 个条件（如下所示），我可以显示名称但无法更改颜色。如何根据以下条件更改颜色。1. 0 到 15 之间的值，颜色 = 红色 | 2. 值在 15 到 30 之间，颜色 = 橙色 | 3. 值在 30 到 45 之间，颜色 = 蓝色 | 4. 值在 45 到 60 之间，颜色 = 绿色

function getQueryParameterByName(name, url = window.location.href) {
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return "";
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var catName = "Nil";
var cat1Marks = getQueryParameterByName("c1") * 1;
var catIndex = 0;

if(cat1Marks< 0){
  cat1Marks =0;
}

if (cat1Marks > 15 && cat1Marks <= 30)
{
  catName = "Basic";
  catIndex = 1;
}
else if (cat1Marks > 30 && cat1Marks <= 45)
{
  catName = "Intermediate";
  catIndex = 2;
}
else if (cat1Marks > 45 )
{
  catIndex = 3;
  catName = "Advance";
}

if(cat1Marks> 60){
  cat1Marks = 60;
}

function drawChart() {
  var options = {
    legend: "none",
    pieHole: 0.5,
    pieSliceTextStyle: {
      color: "black",
    },

    colors: ["green", "#f9f9f9"],
    'tooltip': {
      trigger: 'none'
    }
  };

提前致谢。

标签： javascript