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

可以在http://stevethomas.com.au/php/how-to-make-a-tag-cloud-in-php-mysql-and-css.html

找到设置标记云的精彩指南

Answer 3

试试i2ui：

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

设置每个标签的费率（出现率）

<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>

别忘了拨打javascript：
```
 i2.emph();
```

请参阅演示：http://jsfiddle.net/7GcKT/2/

根据出现次数在标签云中设置字体大小

3 个答案: