2011-02-14 95 views
1

我想根據分配給產品的標籤創建標籤雲。這個想法是標籤越多,標籤雲中的文字越大。基於發生的標籤雲設置字體大小

我有寫的代碼返回標記文本的發生次數,但我不知道如何將權重轉換爲一個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個標籤,從occurances 1到30我怎麼可能將它們分配給我的CSS類。我也需要這種靈活性,這樣我就可以擁有任意數量的任何範圍的標籤。

我使用PHP作爲腳本語言,所以如果代碼是在或JavaScript,我也是用在我的網站/ jQuery的

誰能給我任何幫助或指向我做我不介意到一個教程或代碼片斷哪些是我以後?

+0

http://webdesign.about.com/od/csstutorials/a/aa011407.htm – 2011-02-14 11:05:12

回答

1

找到我將回答如何「權」分配給每個號碼直接的問題。

給定一組數字並假設您想要8個「權重」,請將權重1分配給最低(最小)數量並將權重8分配給最高(最大)數量。然後根據最小和最大數字計算每個數字應用多少重量並賦值。

代碼示例所以這裏超過100個字越好,在JavaScript:

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

全部工作示例:http://jsfiddle.net/yahavbr/7QDMC/

您可以並且可能使用的

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

例在服務器端代碼中更好地使用該邏輯,不應該太複雜,無法將代碼轉換爲PHP。 :)

0

嘗試i2ui:

  1. 定義字體大小範圍:CSS:[{字體: '8PT'},{字體: '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/