标签云 - 根据 no 增加字体粗细答案

【问题标题】：Tag cloud - increase the font weight based on the no标签云 - 根据 no 增加字体粗细
【发布时间】：2015-08-04 04:43:08
【问题描述】：

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

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

]

我正在研究是否有一个内置库可以为我做这件事。或者如果有更聪明的方法来获得想要的结果

【问题讨论】：

您是要增加font-weight 还是font-size？

标签： javascript jquery css tag-cloud

【解决方案1】：

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>

【讨论】：