javascript - 标签云-基于否增加字体粗细

我正在尝试创建徽章。每个徽章都有一个与之关联的数字。我需要基于否增加每个粗细的字体粗细。

我只需要最多使用4种不同的字体粗细。

所以如果我没有这样的话

var arr = [
    {name: 'one', count: 1},
    {name: 'three', count: 3},
    {name: 'four', count: 4},
    {name: 'six', count: 6},
    {name: 'seven', count: 7},
    {name: 'eight', count: 8},
    {name: 'nine', count: 9},
    {name: 'seventy eight', count: 78},
    {name: 'ten', count: 10},
    {name: 'two', count: 2},
    {name: 'fouty five', count: 45},
    {name: 'ninty two', count: 92},
    {name: 'twenty two', count: 22},
    {name: 'thirty four', count: 34},
    {name: 'fifty five', count: 55},
    {name: 'fifty four', count: 54},
    {name: 'seventy five', count: 75},
    {name: 'eleven', count: 11},
    {name: 'sixty one', count: 62},
      {name: 'hundred', count: 100}

];

我将它们分组为：

   [
{
    "name": "one",
    "count": 1,
    "class": "badge1"
},
{
    "name": "three",
    "count": 3,
    "class": "badge1"
},
{
    "name": "four",
    "count": 4,
    "class": "badge1"
},
{
    "name": "six",
    "count": 6,
    "class": "badge1"
},
{
    "name": "seven",
    "count": 7,
    "class": "badge1"
},
{
    "name": "eight",
    "count": 8,
    "class": "badge1"
},
{
    "name": "nine",
    "count": 9,
    "class": "badge1"
},
{
    "name": "seventy eight",
    "count": 78,
    "class": "badge4"
},
{
    "name": "ten",
    "count": 10,
    "class": "badge1"
},
{
    "name": "two",
    "count": 2,
    "class": "badge1"
},
{
    "name": "fouty five",
    "count": 45,
    "class": "badge3"
},
{
    "name": "ninty two",
    "count": 92,
    "class": "badge5"
},
{
    "name": "twenty two",
    "count": 22,
    "class": "badge2"
},
{
    "name": "thirty four",
    "count": 34,
    "class": "badge2"
},
{
    "name": "fifty five",
    "count": 55,
    "class": "badge3"
},
{
    "name": "fifty four",
    "count": 54,
    "class": "badge3"
},
{
    "name": "seventy five",
    "count": 75,
    "class": "badge4"
},
{
    "name": "eleven",
    "count": 11,
    "class": "badge1"
},
{
    "name": "sixty one",
    "count": 62,
    "class": "badge3"
},
{
    "name": "hundred",
    "count": 100,
    "class": "badge5"
}

]

我正在查看是否有内置库可以为我完成此任务。还是有一种更聪明的方法来获得期望的结果

最佳答案

This is what I have done now:

var arr = [
    {name: 'one', count: 1},
    {name: 'three', count: 3},
    {name: 'four', count: 4},
    {name: 'six', count: 6},
    {name: 'seven', count: 7},
    {name: 'eight', count: 8},
    {name: 'nine', count: 9},
    {name: 'seventy eight', count: 78},
    {name: 'ten', count: 10},
    {name: 'two', count: 2},
    {name: 'fouty five', count: 45},
    {name: 'ninty two', count: 92},
    {name: 'twenty two', count: 22},
    {name: 'thirty four', count: 34},
    {name: 'fifty five', count: 55},
    {name: 'fifty four', count: 54},
    {name: 'seventy five', count: 75},
    {name: 'eleven', count: 11},
    {name: 'sixty one', count: 62},
      {name: 'hundred', count: 100}

];


    var min = 1;
    var max = 5;
    var MinViewed = 1;
    var MaxViewed = 100;


    for(var count = 0; count < arr.length; count++){
       var fontsize  = (min+((arr[count].count - MinViewed)* (max - min ) / ( MaxViewed - MinViewed )));
       arr[count].class  = 'badge'  + Math.round(fontsize);
    }


  console.log(JSON.stringify(arr));

在使用angular开发的UI上

<div style="margin-right:5px; margin-bottom:5px; display:inline-block;" ng-repeat="item in arr">
        <span class=  {{item.class}} ng-click="cloudTopicClick(item.id)"> {{item.name | short}} {{item.count}} </span>
    </div>