根據發生情況在標簽雲中設置字體大小

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中找到設置標簽雲的不錯指南。