如何根据百分比添加 svg 圆？

Question

我必须根据给定颜色范围内的百分比添加一个填充颜色的圆圈，并将其插入表格中。我得到了基于百分比的颜色值，但我无法添加圆圈并用颜色填充圆圈。

我必须这样显示：

我的代码是

// code for calculting color value based on %
function pickHex(weight) {
  color1 = [185, 0, 0]
  color2 = [0, 185, 0]
  var w1 = weight;
  var w2 = 1 - w1;
  var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
      Math.round(color1[1] * w1 + color2[1] * w2),
      Math.round(color1[2] * w1 + color2[2] * w2)];
  return rgb;
}

function draw_view1_table() {
  $(".view1-table").on('template', function() {
    $('#view1-table').dataTable({
      "ajax": {
        "url": "get_table_view_data?quarter=" + options["quarter"][0] + "&year=" + options["year"][0],
        "dataSrc": ""
      },
      "autoWidth": true,
      "columns": data_table_dict,
      createdRow: function(row, data) {
        $(row).find('td:eq(0)').attr('data-state_id', data["Sr. No."]);
      },
      columnDefs: [{
        targets: 0,
        width: "150px",
        className: 'state_col',
        render: function(data) {
          return data;
        }
      }, {
        targets: '_all',
        width: "120px",
        "render": function(data) {
          if (data) {
            var clr = pickHex(data)
            //I have added span here but it's not working
            return "<span class='rectangle'></span>"+indian_number_format(data.toFixed(2));is not working 
          } else {
            return data
          }
        }
      }],
      scrollX: true,
      scrollY: "360px",
      "bInfo": true,
      "bAutoWidth": true,
      scrollCollapse: true,
      paging: false,
      language: {
        searchPlaceholder: "Search States"
      },
      dom: 'l<"toolbar">frtip',
      initComplete: function() {
        $("div.toolbar")
          .html('<div class="d-flex mt-1 h3 mb-0 mr-4"><button type="button" class="btn mybtn text-white"  id="table-download-button"><div class="download"> Download  </div><i class="fas fa-download mr-1"></i></button></div>');
      }
    });
}

谁能帮我解决这个问题？

Answer 1

所以我想这就是你想要的：

function pickHex(weight) {
  var w1 = 185 * (weight/100);
  var w2 = 185 - w1;
  var rgb = [Math.round(w2),
      Math.round(w1), 0];
  return "rgb(" + Math.round(w2) + "," + Math.round(w1) + ",0)";
}

document.getElementById('some1').style.backgroundColor = pickHex(10);
document.getElementById('some2').style.backgroundColor = pickHex(20);
document.getElementById('some3').style.backgroundColor = pickHex(30);
document.getElementById('some4').style.backgroundColor = pickHex(40);
document.getElementById('some5').style.backgroundColor = pickHex(50);
document.getElementById('some6').style.backgroundColor = pickHex(60);
document.getElementById('some7').style.backgroundColor = pickHex(70);
document.getElementById('some8').style.backgroundColor = pickHex(80);
document.getElementById('some9').style.backgroundColor = pickHex(90);
document.getElementById('some10').style.backgroundColor = pickHex(100);

div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

<div id="some1"></div>
<div id="some2"></div>
<div id="some3"></div>
<div id="some4"></div>
<div id="some5"></div>
<div id="some6"></div>
<div id="some7"></div>
<div id="some8"></div>
<div id="some9"></div>
<div id="some10"></div>