html自动生成数字表格,用表格(Table)数据创建SVG图表【简单实用】

当我们想把表格数据以图表形式呈现出来时，大家可能想到用echart等第三方知名插件来完成，但这些插件需要我们使用表格的数据写程序代码构建数组代入到样例模型里，这是比较复杂和耗时的，对很多不懂js的人来说，是个不可完成的事情。本文介绍的这个范例，是无需写代码，便能直接把表格数据创建成SVG图表呈现出来，简单又实用，非常适合不懂代码或要求不高的人使用。

用表格数据创建SVG图表

html代码html>

用表格数据创建SVG图表

table td {padding: 3px;}

#canvas_container {

width: 700px;

}

用表格数据创建SVG图表

HTML5 logo图片大小比较

Device	Resolution	PNG image	JPEG image	Image/Vector ratio
iPhone 3G	320x480	9.5k	6.3k	4.4 (9.5)
Nexus One	480x800	15.4k	9.8k	6.8 (14.7)
DROID RAZR	540x960	17.3k	12k	8.4 (18.1)
iPhone 4	640x960	20.7k	13.2k	9.25 (19.9)
iPhone 5	640x1136	21.6k	14k	9.8 (21.1)
Galaxy Nexus	720x1280	24.4k	15.8k	11 (23.8)
iPad 1&2	1024x768	24.8k	15.7k	11 (23.7)
Galaxy Tab 10.1, Nexus 7	1280x800	27.1k	17.9k	12.5 (27)
Kindle Fire HD	1920x1200	44.1k	29.9k	20.9 (45)
iPad new	2048x1536	57.7k	39.6k	27.7 (59.7)

$(function () {

// canvas_container 是绘制svg图表的div的id

var paper = new Raphael(document.getElementById('canvas_container'), 600, 525);

// 首先转换表格数据为对象

// html5logo 是表格id

var aRows = $('#html5logo tbody tr:not(:first-child)');

var oData = { devices: [] };

for (var i = 0; i 

var $this = $(aRows[i]);

oData.devices[oData.devices.length] = {

device: $this.find('td:nth-child(1)').text(),  //第1列内容，将作为图表的项目名称

ratio: $this.find('td:nth-child(5)').text().split(' ')[0] }; //第5列数据，将作为图表的数据项

//   console.log(i, oData.device, oData.ratio);

}

// 好了，我们已经获得了表格: "Device","ratio"

// 我们现在用Raphael把它渲染为SVG

// 我们选择从0行开始迭代数字

// 所以我们在底部得到最快的，在顶部得到最慢的

// SVG绘制的图表，最上面的柱对应表格最后一行的数据，迭代方向刚好与表格相反

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 

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 

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);

});

代码解释：

1、要引用三个js文件，文件都在下载源码压缩包里，注意路径要写正确。

2、jQuery程序要注意几个地方，具体可看程序代码里的注释文字。

这里特别强调一下，就是SVG绘制的图表，最上面的柱对应表格最后一行的数据，迭代方向刚好与表格相反。

第1列内容，将作为图表的项目名称；第5列数据，将作为图表的数据项。请看代码注释文字。项目名称和数据项都是可以在代码里修改的。