Javascript 在传单中创建具有不同圆圈大小的图例

下午好

我正在与传单传奇战斗，这取决于圆圈半径。因为我将有相同颜色的值，但大小不同。我想创造适合他们的传奇

我试过这个例子：

在我的地图中实现

为此，我使用了以下代码：

   function getRadius(r) {
//r = Math.sqrt(y / Math.PI)
//return r;
return r > 100 ? 15 :
       r > 50 ? 10 :
       r > 20 ? 6 :
       r > 10 ? 3 :
       0;
 }


 var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend');
grades = [0, 10, 20, 50, 100],
labels = ['<strong>Amount of units</strong>'],
categories = ['> 100','50-100','1-50','N/A'];

for (var i = 0; i < grades.length; i++) {
    labels.push(
        '<i class="circlepadding" style="width: '+Math.max(0,(19-1.8*getRadius))+'px;"></i> <i 
 style="background: #8080A0; width: '+getRadius*2+'px; height: '+getRadius*2+'px; border-radius: 
 50%; margin-top: '+Math.max(0,(9-getRadius))+'px;"></i> ');
}
div.innerHTML = labels.join('<br>');
return div;
 };
  legend.addTo(map);

函数getRadius（r）{
//r=Math.sqrt（y/Math.PI）
//返回r；
返回r>100？15：
r>50？10：
r>20？6：
r>10？3：
0;
}
var legend=L.control（{position:'bottomright'}）；
legend.onAdd=函数（映射）{
var div=L.DomUtil.create（'div'，'info legend'）；
等级=[0,10,20,50,100]，
标签=['单位数量']，
类别=['>100'，'50-100'，'1-50'，'N/A']；
对于（变量i=0；i”）；
返回div；
};
图例。添加到（地图）；

但最后我得到了一个很差的结果，如下图所示：

---

有人能帮我解决这个问题吗？

将for循环更改为：

for (var i = 0; i < grades.length; i++) {
            var grade = grades[i]*5;
      labels.push(
          '<i class="circlepadding" style="width: 5px;"></i> <i  style="background: #8080A0; width: '+getRadius(grade)*2+'px; height: '+getRadius(grade)*2+'px; border-radius:  50%; margin-top: '+Math.max(0,(9-getRadius(grade)))+'px;"></i> '+categories[i]);
  }

---

是的，很好。然而，有没有办法克服这个“XX”变量？要将类别数量从5个减少到4个？看起来我必须删除其中一个等级，然后就可以了。

categories = ['> 100','50-100','1-50','N/A','XX'];