利用jQuery做的sparkline

有關網頁及相關語法的討論
回覆文章
頭像
tim
文章: 1379
註冊時間: 2008年 11月 26日, 00:49

利用jQuery做的sparkline

文章 tim »

原來是看到了這個 firefox cup 活動時, 檢閱原始碼看到神奇繪製圖表功能的語法, 只有放入資料而已, 如下:
https://addons.mozilla.org/zh-TW/firefoxcup/
呈現結果是:
chart.jpg
chart.jpg (28.1 KiB) 已瀏覽 2571 次
而 html碼是:

代碼: 選擇全部

 <table id="teams">
      <thead>
        <tr>
          <th>Flag</th>

          <th>Country</th>
          <th>粉絲</th>
        </tr>
        <tr><td colspan="3"></td></tr>
      </thead>
      <tbody>
                  <tr>
            <td class="persona"><div class="persona-preview flag flag-brazil" ></div></td>

            <td>Brazil</td>
            <td class="fans"><span class="inlinesparkline">125,177,259,392,597,905,1334,1902,2483,3173,4090,5081,6171</span>7,320</td>
          </tr>
                  <tr>
            <td class="persona"><div class="persona-preview flag flag-germany" ></div></td>
            <td>Germany</td>
            <td class="fans"><span class="inlinesparkline">103,118,148,204,300,419,579,793,1037,1358,1828,2366,2976</span>3,658</td>

          </tr>
                  <tr>
            <td class="persona"><div class="persona-preview flag flag-argentina"></div></td>
            <td>Argentina</td>
            <td class="fans"><span class="inlinesparkline">407,523,657,848,1052,1265,1472,1686,1886,2080,2314,2549,2787</span>3,057</td>
          </tr>
.....
另外有查到一篇是 jQuery Spaklines 的文章, 有介紹實作的方式, 特別的地方是有 support 到 ie6 這樣的功能, 很值得參考:
http://omnipotent.net/jquery.sparkline/
多多留言, 整理文章, 把經驗累積下來.....
回覆文章