技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

用表格(Table)數(shù)據(jù)創(chuàng)建SVG圖表【簡單實用】

作者:admin    時間:2020-2-22 22:46:28    瀏覽:

當我們想把表格數(shù)據(jù)以圖表形式呈現(xiàn)出來時,大家可能想到用echart等第三方知名插件來完成,但這些插件需要我們使用表格的數(shù)據(jù)寫程序代碼構(gòu)建數(shù)組代入到樣例模型里,這是比較復雜和耗時的,對很多不懂js的人來說,是個不可完成的事情。本文介紹的這個范例,是無需寫代碼,便能直接把表格數(shù)據(jù)創(chuàng)建成SVG圖表呈現(xiàn)出來,簡單又實用,非常適合不懂代碼或要求不高的人使用。

用表格數(shù)據(jù)創(chuàng)建SVG圖表

用表格數(shù)據(jù)創(chuàng)建SVG圖表

demo

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用表格數(shù)據(jù)創(chuàng)建SVG圖表</title>

<style>
table td {padding: 3px;}
 #canvas_container {  
 width: 700px;  
}
</style>

</head>
<body>
<div>

<div>
<h2>用表格數(shù)據(jù)創(chuàng)建SVG圖表</h2>
</div>

<div>
<div>
<div>
<table border="1" id="html5logo">
<caption style="caption-side:bottom;">HTML5 logo圖片大小比較</caption>
<tbody>
<tr>
<th>Device</th>
<th>Resolution</th>
<th>PNG image</th>
<th>JPEG image</th>
<th>Image/Vector ratio</th>
</tr>
<tr>
<td>iPhone 3G</td>
<td>320x480</td>
<td>9.5k</td>
<td>6.3k</td>
<td>4.4 (9.5)</td>
</tr>
<tr>
<td>Nexus One</td>
<td>480x800</td>
<td>15.4k</td>
<td>9.8k</td>
<td>6.8 (14.7)</td>
</tr>
<tr>
<td>DROID RAZR</td>
<td>540x960</td>
<td>17.3k</td>
<td>12k</td>
<td>8.4 (18.1)</td>
</tr>
<tr>
<td>iPhone 4</td>
<td>640x960</td>
<td>20.7k</td>
<td>13.2k</td>
<td>9.25 (19.9)</td>
</tr>
<tr>
<td>iPhone 5</td>
<td>640x1136</td>
<td>21.6k</td>
<td>14k</td>
<td>9.8 (21.1)</td>
</tr>
<tr>
<td>Galaxy Nexus</td>
<td>720x1280</td>
<td>24.4k</td>
<td>15.8k</td>
<td>11 (23.8)</td>
</tr>
<tr>
<td>iPad 1&2</td>
<td>1024x768</td>
<td>24.8k</td>
<td>15.7k</td>
<td>11 (23.7)</td>
</tr>
<tr>
<td>Galaxy Tab 10.1, Nexus 7</td>
<td>1280x800</td>
<td>27.1k</td>
<td>17.9k</td>
<td>12.5 (27)</td>
</tr>
<tr>
<td>Kindle Fire HD</td>
<td>1920x1200</td>
<td>44.1k</td>
<td>29.9k</td>
<td>20.9 (45)</td>
</tr>
<tr>
<td>iPad new</td>
<td>2048x1536</td>
<td>57.7k</td>
<td>39.6k</td>
<td>27.7 (59.7)</td>
</tr>
</tbody>
</table>
</div>
<div>
<div id="canvas_container"></div>
</div>
</div>

</div>
</div>
<script src="stopExecutionOnTimeout.js"></script>
<script src='jquery-2-1-3.min.js'></script>
<script src='raphael-2-1-0-min.js'></script>
<script id="rendered-js">
$(function () {
  // canvas_container 是繪制svg圖表的div的id
  var paper = new Raphael(document.getElementById('canvas_container'), 600, 525);

  // 首先轉(zhuǎn)換表格數(shù)據(jù)為對象
  // html5logo 是表格id
  var aRows = $('#html5logo tbody tr:not(:first-child)');
  var oData = { devices: [] };
  for (var i = 0; i < aRows.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    var $this = $(aRows[i]);
    oData.devices[oData.devices.length] = {
      device: $this.find('td:nth-child(1)').text(),  //第1列內(nèi)容,將作為圖表的項目名稱
      ratio: $this.find('td:nth-child(5)').text().split(' ')[0] }; //第5列數(shù)據(jù),將作為圖表的數(shù)據(jù)項

    //   console.log(i, oData.device, oData.ratio);
  }
  // 好了,我們已經(jīng)獲得了表格: "Device","ratio"
  // 我們現(xiàn)在用Raphael把它渲染為SVG
  // 我們選擇從0行開始迭代數(shù)字
  // 所以我們在底部得到最快的,在頂部得到最慢的
  // SVG繪制的圖表,最上面的柱對應表格最后一行的數(shù)據(jù),迭代方向剛好與表格相反
  window.CP.exitedLoop(0);var height = 40,x = 170,scale = 6,devices = oData.devices.length;
  var style = {
    bg: 'rgba(0,0,0,.4)',
    text: 'rgba(16,16,55,.7)',
    value: 'rgba(16,16,0,.8)' };

  for (var i = 0; i < 50; i++) {if (window.CP.shouldStopExecution(1)) break;
    var xx = x + i * scale;
    var line = paper.path('M ' + xx + ',15 L ' + xx + ',' + height * devices * 1.115);
    line.attr({ 'stroke': style.bg });
  }window.CP.exitedLoop(1);
  for (var i = 0; i < devices; i++) {if (window.CP.shouldStopExecution(2)) break;
    var me = oData.devices[i];
    var y = (devices - i) * height;
    var width = x + me.ratio * scale;
    var rectangle = paper.rect(x, y, 0, height * .9);
    rectangle.attr({ fill: style.bg, stroke: '#ddd', 'stroke-width': 0 });
    rectangle.animate({ "width": width }, 1000 * me.ratio / 30);

    var value = paper.text(width + x + 20, y + height * .5, me.ratio);
    value.attr({ 'opacity': 0, 'font-size': 12, 'stroke': style.value, 'text-align': 'left' });
    value.animate({ "opacity": 1 }, 2000);

    var text = paper.text(90, y + height * .5, me.device);
    text.attr({ 'font-size': 12, 'stroke': style.text, 'width': '100px', 'text-align': 'left' });


  }window.CP.exitedLoop(2);
});

    </script>
</body>
</html>

execcodegetcode

代碼解釋:

1、要引用三個js文件,文件都在下載源碼壓縮包里,注意路徑要寫正確。

<script src="stopExecutionOnTimeout.js"></script>
<script src='jquery-2-1-3.min.js'></script>
<script src='raphael-2-1-0-min.js'></script>

2、jQuery程序要注意幾個地方,具體可看程序代碼里的注釋文字。

這里特別強調(diào)一下,就是SVG繪制的圖表,最上面的柱對應表格最后一行的數(shù)據(jù),迭代方向剛好與表格相反。

第1列內(nèi)容,將作為圖表的項目名稱;第5列數(shù)據(jù),將作為圖表的數(shù)據(jù)項。請看代碼注釋文字。項目名稱和數(shù)據(jù)項都是可以在代碼里修改的。

標簽: SVG  table  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */