标签云——根据编号增加字体的权重

Tag cloud - increase the font weight based on the no

本文关键字：字体 增加 权重 标签 编号      更新时间：2023-09-26

我正在尝试创建徽章。每个徽章都有一个号码。我需要根据no增加每个weight的字体粗细。

我只需要使用最多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"
}

)

我正在看是否有一个内置的库可以为我做到这一点。或者是否有更聪明的方法来得到想要的结果

我现在是这样做的:

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>

相关文章：