Label Cloud Online Test

標籤雲的基本原理很簡單，就是改變一下CSS而已。

Blogger中的標籤格式大致如下：

<div>
  <ul>
    <li><a>AAA</a><span>(2)</span></li>
    <li><a>BBB</a><span>(1)</span></li>
  </ul>
</div>

只要將<li>設成display:inline，就會變成橫向表示，IE上要使標籤換行，還要在外面的區塊加上word-wrap:break-word (不知道是否有其他方法)。文章數的部分可依需要改變，例如是否顯示及顏色大小等。接下來就是依照標籤的文章數將標籤的顏色大小加以改變，顏色加在<a>上，文字大小加在<li>上 (好像這樣line-height才會有用)。
依照文章數改變style一般使用以下的方法，以log(文章數)/log(最大文章數)來做加權：

weightStyle( min, max, count, maxCount ) {
  if (maxCount <= 1 || min === max ) {
    return max;
  } else if (min < max) {
    return min + Math.floor(Math.log(count) * (max-min) / Math.log(maxCount));
  } else {
    return min - Math.floor(Math.log(count) * (min-max) / Math.log(maxCount));
  }
}

加權的方式可以自己做合理的改變，例如想要靠近代表最小值的顏色多一點，可以依照比例縮小加權用的文章數：

if (count < maxCount*0.66) {
  count = (count-1)*0.3 + 1;
}

標籤雲的線上測試：用來選擇自己喜歡的顏色及大小範圍、加權方式，可以設定標籤數、最大文章數，按下Refresh按鈕重繪。繪圖使用jquery plugin：flot，顏色選擇器使用yui color picker，flot使用canvas繪圖，因為IE不支援，所以需要ExploreCanvas (動態載入ExploreCanvas的話，flot繪圖會有問題，目前原因不明)，祝大家找到自己喜歡的標籤雲。