jQuery Visualize
2015-06-11 11:25
507 查看
jQuery Visualize Plugin 简介信息
Visualize是一个利用HTML5 Canvas将Tables标签转换成图表的jQuery插件。支持的图表类型包括:线状图,柱状图,饼状图。可以设置图表标题,高度/宽度,颜色等。下载:http://download.csdn.net/detail/huangyan92/8795415
示例:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Demo page</title> <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <link type="text/css" rel="stylesheet" href="demopage.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ //make some charts $('table').visualize({type: 'pie', pieMargin: 10, title: '2009 Total Sales by Individual'}); $('table').visualize({type: 'line'}); $('table').visualize({type: 'area'}); $('table').visualize(); }); </script> </head> <body> <table > <caption>2009 Individual Sales by Category</caption> <thead> <tr> <td></td> <th>food</th> <th>auto</th> <th>household</th> <th>furniture</th> <th>kitchen</th> <th>bath</th> </tr> </thead> <tbody> <tr> <th>Mary</th> <td>150</td> <td>160</td> <td>40</td> <td>120</td> <td>30</td> <td>70</td> </tr> <tr> <th>Tom</th> <td>3</td> <td>40</td> <td>30</td> <td>45</td> <td>35</td> <td>49</td> </tr> <tr> <th>Brad</th> <td>10</td> <td>180</td> <td>10</td> <td>85</td> <td>25</td> <td>79</td> </tr> <tr> <th>Kate</th> <td>40</td> <td>80</td> <td>90</td> <td>25</td> <td>15</td> <td>119</td> </tr> </tbody> </table> </body> </html>
相关文章推荐
- JQuery遍历DOM节点的方法
- jQuery插件animateSlide制作多点滑动幻灯片
- JQuery实现样式设置、追加、移除与切换的方法
- JQuery中$.ajax()方法参数详解
- jQuery Validation Engine(三) 基本常识
- 集成框架 javaweb开发平台ssmy_m(生成代码) java struts2 mybatis spring maven jquery
- JQuery节点元素属性操作方法
- 怎么书写高质量jQuery代码【收藏】
- JQuery包裹DOM节点的方法
- 工作积累(六)——jQuery实现DOM元素事件动态绑定
- JQuery替换DOM节点的方法
- jQuery Validation Engine(二) checkHello data-errormessage
- JQuery复制DOM节点的方法
- JQuery删除DOM节点的方法
- JQuery创建DOM节点的方法
- JQuery查找DOM节点的方法
- jquery无缝间歇向上滚动(间断滚动)
- 精美jQuery插件及源码 前端开发福利
- 基于jQuery鼠标点击弹出登陆框效果
- jquery图片裁切+PHP文件上传