舉例來說,底下這張 Web 2.0關鍵字組成的標籤雲,通常看一眼就會注意到Web 2.0字樣。
![]() |
Fig 2: A Web2.0 Tag cloud, by Markus Angermeier, 2005 (refer) |
首先來看一個範例,這是只有用不同字體大小組成的標籤雲,所以在計算時只需考慮其中一項數值。
假設系統已經有一組資料集,是不同商品的銷售數量。
- MP3隨身聽 (10)
- 平板電腦 (30)
- 320GB隨身硬碟 (15)
- 筆記型電腦 (5)
先取最大值=30、最小值=5。
然後開始套用公式:字型大小級數 = (最大值 * (銷售量 - 最小值)) / (最大值 - 最小值)
計算出的字型大小級數為:
- MP3隨身聽 (6x)
- 平板電腦 (30x)
- 320GB隨身硬碟 (12x)
- 筆記型電腦 (0x)
如果要直接用這個計算結果顯示,最小值的部分應該例外處理,設定成1x,才不會根本看不到。
但是在網頁上呈現時,我們可能希望控制字型大小範圍,免得小到看不見、大到整個版面都走樣。假設用相對大小做設定(預設16px,200%就是32px),希望最小字型百分比為75%、最大字型百分比為300%,其中百分比差距225%。
所以用公式把字型級數換算成相對百分比:字型級數百分比=字型大小級數/最大級數值。
計算出的百分比為:
- MP3隨身聽 (0.2 = 20%)
- 平板電腦 (1.0 = 100%)
- 320GB隨身硬碟 (0.4 = 40%)
- 筆記型電腦 (0 = 0%)
再換算成我們希望的大小範圍:實際字型大小=最小字型百分比+(相對百分比*(最大字型百分比-最小字型百分比)),例如0.75+0.2*2.25=1.2(120%)。
最後計算結果就是:
- MP3隨身聽 (120%)
- 平板電腦 (300%)
- 320GB隨身硬碟 (165%)
- 筆記型電腦 (75%)
這樣銷售最好的平板電腦就會顯示成我們希望的最大字型300%,而最差的筆記型電腦就是最小的字型75%。
沒有留言:
張貼留言