|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
用表格(Table)數(shù)據(jù)創(chuàng)建SVG圖表【簡(jiǎn)單實(shí)用】
作者:admin 時(shí)間:2020-2-22 22:46:28 瀏覽:當(dāng)我們想把表格數(shù)據(jù)以圖表形式呈現(xiàn)出來(lái)時(shí)，大家可能想到用echart等第三方知名插件來(lái)完成，但這些插件需要我們使用表格的數(shù)據(jù)寫(xiě)程序代碼構(gòu)建數(shù)組代入到樣例模型里，這是比較復(fù)雜和耗時(shí)的，對(duì)很多不懂js的人來(lái)說(shuō)，是個(gè)不可完成的事情。本文介紹的這個(gè)范例，是無(wú)需寫(xiě)代碼，便能直接把表格數(shù)據(jù)創(chuàng)建成SVG圖表呈現(xiàn)出來(lái)，簡(jiǎn)單又實(shí)用，非常適合不懂代碼或要求不高的人使用。
用表格數(shù)據(jù)創(chuàng)建SVG圖表
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ù)為對(duì)象
// 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)容，將作為圖表的項(xiàng)目名稱(chēng)
ratio: $this.find('td:nth-child(5)').text().split(' ')[0] }; //第5列數(shù)據(jù)，將作為圖表的數(shù)據(jù)項(xiàng)
// console.log(i, oData.device, oData.ratio);
}
// 好了，我們已經(jīng)獲得了表格: "Device","ratio"
// 我們現(xiàn)在用Raphael把它渲染為SVG
// 我們選擇從0行開(kāi)始迭代數(shù)字
// 所以我們?cè)诘撞康玫阶羁斓?，在頂部得到最慢?br /> // SVG繪制的圖表，最上面的柱對(duì)應(yīng)表格最后一行的數(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>
代碼解釋?zhuān)?/strong>
1、要引用三個(gè)js文件，文件都在下載源碼壓縮包里，注意路徑要寫(xiě)正確。
<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程序要注意幾個(gè)地方，具體可看程序代碼里的注釋文字。
這里特別強(qiáng)調(diào)一下，就是SVG繪制的圖表，最上面的柱對(duì)應(yīng)表格最后一行的數(shù)據(jù)，迭代方向剛好與表格相反。
第1列內(nèi)容，將作為圖表的項(xiàng)目名稱(chēng)；第5列數(shù)據(jù)，將作為圖表的數(shù)據(jù)項(xiàng)。請(qǐng)看代碼注釋文字。項(xiàng)目名稱(chēng)和數(shù)據(jù)項(xiàng)都是可以在代碼里修改的。
相關(guān)文章
- Table表格td之間有空隙？你少設(shè)了border-collapse
- 表格(Table)高亮顯示鼠標(biāo)所在列和行【6個(gè)實(shí)例】
- 表格(Table)固定第一列，其余列可水平滾動(dòng)【實(shí)例源碼】
- 表格(Table)表頭固定，內(nèi)容上滾【5個(gè)實(shí)例】
- 4款簡(jiǎn)單常見(jiàn)的純CSS表格(table)樣式
- 4款純CSS實(shí)現(xiàn)的響應(yīng)式表格(Responsive Table)實(shí)例
- 【JQuery插件】把網(wǎng)頁(yè)或某div或table表格內(nèi)容轉(zhuǎn)為圖片并下載
- CSS的odd和even屬性實(shí)現(xiàn)table表格tr單雙行顏色相間而不同
- 純css實(shí)現(xiàn)的table表格樣式，教程站常用
x
