根据发生情况在标签云中设置字体大小

Question

我想基于分配给产品的标签创建标签云。 这个想法是标签出现的次数越多，标签云中的文本就越大。

我编写了代码，该代码针对出现的次数返回标签文本，但是我不确定如何将权重转换为css类。

例如。

microwave 9 occurances 
tv 22 occurances 
pc 3 occurances
hi-fi 16 occurances
hdmi 1 occurance

我创建了8个CSS类：

.size1 { font-size 8pt; }
.size2 { font-size 9pt; }
.size3 { font-size 10pt; }

等等

所以说我有10个标签，范围从发生1到30，如何将它们分配给我的CSS类。 我还需要这种灵活性，因此我可以使用任意数量的具有任何出现范围的标签。

我使用php作为脚本语言，因此我不介意代码是在该网站上还是在我的网站上也使用的javascript / jquery中完成的

谁能给我任何帮助，或将我指向需要的教程或代码片段？

Answer 1

我将回答有关如何为每个数字分配“权重”的直接问题。

给定一组数字，并假设您需要8个“权重”，首先将权重1分配给最低（最小）数字，将权重8分配给最高（最大）数字。 然后根据最小和最大数字，计算应为每个数字施加多少权重，并进行分配。

代码示例优于100个单词，因此在JavaScript中如下所示：

function CalculateWeights(arrValues, weightsCount) {
    var arrWeights = [];
    var minValue = 999999;
    var maxValue = -1;
    for (var i = 0; i < arrValues.length; i++) {
        var curValue = arrValues[i];
        if (curValue < minValue)
            minValue = curValue;
        if (curValue > maxValue)
            maxValue = curValue;
    }

    var diff = weightsCount / (maxValue - minValue);
    for (var i = 0; i < arrValues.length; i++) {
        var curValue = arrValues[i];
        if (curValue == minValue)
            arrWeights.push(1);
        else if (curValue == maxValue)
            arrWeights.push(weightsCount);
        else
            arrWeights.push(parseInt(curValue * diff, 10) + 1);
    }

    return arrWeights;
}

用法示例：

var values = [9, 22, 3, 16, 1];
var count = 8;
var weights = CalculateWeights(values, count);

完整的工作示例： http : //jsfiddle.net/yahavbr/7QDMC/

您可以并且最好在服务器端代码中包含该逻辑，将代码转换为PHP不会太复杂。 :)

Answer 2

试试i2ui：

1. 定义字体大小范围：css：[{{fontSize：'8pt'}，{fontSize：'30pt'}]

2. 设置每个标签的比率（发生率）

    <div data-i2="css:[{fontSize:'8pt'},{fontSize:'30pt'}]"> <span data-i2="rate:9">microwave </span> <span data-i2="rate:22">tv </span> <span data-i2="rate:3">pc </span> <span data-i2="rate:16">hi-fi</span> <span data-i2="rate:1">hdmi</span> </div> 

3. 不要忘了调用javascript：

     i2.emph(); 

观看演示： http : //jsfiddle.net/7GcKT/2/

Answer 3

可以在http://stevethomas.com.au/php/how-to-make-a-tag-cloud-in-php-mysql-and-css.html中找到设置标签云的不错指南。