资讯频道 → Web前端
阅读更多

35顶
0踩

Web前端

原创新闻 Visualize：一个jQuery可视化插件

2009-07-13 11:30 by 副主编 zly06 评论(18) 有17266人浏览
jQuery

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

数据可视化对于HTML来说，一直都是一个棘手的问题。Scott Jehl为我们准备了这样的一个插件-"Visualize",使用了HTML 5 Canvas。该插件提供了一个简单的$('table').visualize() 方法，从HTML table中生成bar, line, area以及pie charts，并且允许您使用各种不同的方式来配置。

你可以创造一个标准的table如下： 
<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>
                ...repetitive rows removed for brevity. 
        </tbody>
</table>

以下是一个演示，你可以改变表格中的数据，然后可视化图形会跟随你的数值改变：
Demo：http://www.filamentgroup.com/examples/charting_v2/

使用visualize后的图形如下，很漂亮：




点击下载：http://www.filamentgroup.com/examples/charting_v2/visualize.filamentgroup.zip

点击查看更多详情：http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
  • 大小: 106.1 KB
来自: ajaxian
35
顶
0
踩
评论 共 18 条 请登录后发表评论
18 楼 lpzp123 2009-07-15 16:54
是不是下载包少个文件？
<script type="text/javascript" src="editabletable.js"></script>
17 楼 duanya 2009-07-14 12:40
  
16 楼 OnJavaRoad 2009-07-14 12:18
好东西！我也 一下。
15 楼 windywindy 2009-07-14 09:29
好东西，就是demo下载到本地，table里的值不能修改！
14 楼 全冠清 2009-07-14 08:56
peacock 写道
lfrick 写道
IE7下也有效！

别乱忽悠，IE8都看不了！IE只能看到第一个表格，后面的图表都是空的，网页的顶头已经写得明明白白：
引用
This is an example from the Filament Group Lab Article: jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

不要误导其他人好不好，人家写的很清楚
引用

Browser Support

We have tested this plugin in the following browsers: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9.

在ie下没弄出来的同学看这段
引用

This plugin uses the HTML 5 canvas element, which is not supported in an version of Internet Explorer at this time. Fortunately, Google maintains a library that translates canvas scripting into VML, allowing it to work in all versions of internet explorer. The script is included in the zip. To use it, just be sure to include the script in your page using a conditional comment, like this:
<!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->

13 楼 kongxx 2009-07-14 08:18
好东西，一顶要支持一下。
12 楼 cjx186 2009-07-14 00:02
不错啊。强大
11 楼 Dreamer 2009-07-13 22:16
Online Demo是work的，但是把它的.zip文件download到本地桌面就不work了。。。哪位同志也遇到了这个问题？
10 楼 chxkyy 2009-07-13 16:47
youjianbo_han_87 写道
我的FF修改下，直接就无法响应，看样子效能不好

我在ff3.5下很好。
9 楼 commonleoj 2009-07-13 16:07
并没有显示jq的可视化...
8 楼 movomoto 2009-07-13 14:59
chorme 很快 。ie8 倒是能出来 不过很慢
7 楼 youjianbo_han_87 2009-07-13 14:57
我的FF修改下，直接就无法响应，看样子效能不好
6 楼 peacock 2009-07-13 14:00
lfrick 写道
IE7下也有效！

别乱忽悠，IE8都看不了！IE只能看到第一个表格，后面的图表都是空的，网页的顶头已经写得明明白白：
引用
This is an example from the Filament Group Lab Article: jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas
5 楼 lfrick 2009-07-13 13:38
IE7下也有效！
4 楼 congjl2002 2009-07-13 13:06
非常强大的说
3 楼 peacock 2009-07-13 12:47
我晕，HTML 5 Canvas
2 楼 whaosoft 2009-07-13 11:59
   要是jquery的代码 有的不压缩了 那更好!~
1 楼 andyhan 2009-07-13 11:53
好东西！顶！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 让人感动的代码

    在算法导论的第一节课上，老师给我们展示了下面两段代码。突然想到很久之前看的一篇文章里提出的一个问题，是否有这样一段代码，能让你感动。看到这段代码后，起码这三年里，我找到了能让我感动的代码。 代码是两个函数的对比//参数 二维数组，数组的行数m，数组的列数n void method1(int[][] array,int m,int n){ for(int row=0;row<m;row++){

  • html 数据可视化

    骚！记忆力是个好东西，可是它不属于我掌控，呜！我还以为这篇文章早已发布出来了，想不到居然只记录在...4、jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。 5、TypeScript 是 JavaScript 的一

  • 你必备的39个大数据可视化工具

    数据可视化无处不在，而且比以前任何时候都重要,无论是在行政演示中为数据点创建一个可视化进程，还是用可视化概念来细分客户，数据可视化都显得尤为重要,本文将推荐39个可用于处理大数据的可视化工具(排名不分先后...

  • 62个大数据可视化工具

    62个大数据可视化工具 Intetix Foundation（英明泰思基金会）由从事数据科学、非营利组织和公共政策研究的中国学者发起成立，致力于通过数据科学改善人类社会和自然环境。通过联络、动员中美最顶尖的数据科学家和...

  • vite打包可视化工具rollup-plugin-visualizer图文教程

    举个例子，你的项目引用了jquery@2.1,的依赖，而你npm instal的第三方插件引用了jquery@2.2，这样你vite可能会将两个jquery版本依赖都打包进去。你体积就变大了，这个插件就是方便你查看打包后，有哪些依赖。2、vite...

  • jquery绘图插件_10个jQuery绘图插件

    jquery绘图插件 10个jQuery绘图插件可以帮助您绘制图形，方框，箭头，涂鸦板，画线，圆和其他形状的东西！ 然后其中一些会利用HTML canvas元素，因此请确保将它们签出！ jQuery，编写更少的代码可以做更多的事情，...

  • 20个数据可视化工具

    01. iCharts ...iCharts 提供了一个用于创建并呈现引人注目图表的托管解决方案。有许多不同种类的图表可供选择，每种类型都完全可定制，以适合网站的颜色主题。iCharts 有交互元素，可以从 Google Doc、E

  • 20个数据可视化（数据视觉化）工具

    获得信息的最佳方式之一是，通过视觉化方式，快速抓住要点信息。另外，通过视觉化呈现数据，也揭示了令人惊奇的模式和观察结果，是不可能通过简单统计就能显而易见看到的模式和结论。正如作家、记者

  • 分享39个大数据可视化工具（数据分析必备）

    无论是在行政演示中为数据点创建一个可视化进程，还是用可视化概念来细分客户，数据可视化都显得尤为重要。以前的工具的基本不能处理大数据。本文将推荐39个可用于处理大数据的可视化工具（排名不分先后）。其中许多...

  • 10个jQuery绘图插件

    10个的jQuery插件绘制帮你，好了，画的东西这样的图，箱，箭头，涂鸦垫，画线，圆等形状！ 有些则利用HTML Canvas元素所以一定要检查这些的了！ jQuery的，写事半功倍的代码，现在可以让你少写，并吸引更多。 这些...

  • 39个大数据可视化工具 数据研究必备

    无论是在行政演示中为数据点创建一个可视化进程，还是用可视化概念来细分客户，数据可视化都显得尤为重要。以前的工具的基本不能处理大数据。本文将推荐39个可用于处理大数据的可视化工具（排名不分先后）。其中许多...

  • 39个大数据可视化工具

    39个大数据可视化工具Intetix Foundation（英明泰思基金会）由从事数据科学、非营利组织和公共政策研究的中国学者发起成立，致力于通过数据科学改善人类社会和自然环境。通过联络、动员中美最顶尖的数据科学家和社会...

  • 39个大数据可视化工具 | 数据研究必备

    无论是在行政演示中为数据点创建一个可视化进程，还是用可视化概念来细分客户，数据可视化都显得尤为重要。以前的工具的基本不能处理大数据。本文将推荐39个可用于处理大数据的可视化工具（排名不分先后）。其中许多...

  • 有哪些值得推荐的数据可视化工具？

    作者：文兄 ...来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请...地图数据可视化工具（7个）7.金融（股票）数据可视化工具（2个）8.时间轴数据可视化工具（2个）9.函数与公式数据可视化工具（2个

  • 30个最好的数据可视化工具推荐

    iCharts是一个在线的数据可视化工具,被广泛应用于商业/经济/体育等领域的报告中;为了拥有庞大的资料量,它提供以云端为基础和受专利保护的图表工具,让企业和个人都能透过网站把资料分享给数百万的人;iCharts免费版本...

  • 数据可视化工具

    无论是在行政演示中为数据点创建一个可视化进程，还是用可视化概念来细分客户，数据可视化都显得尤为重要。以前的工具的基本不能处理大数据。无论你是需要对数据进行分析并且决定用最好的方式向你的客户或同事进行...

  • 三相LCL并网逆变器：高精度快速响应的有功无功解耦控制技术,三相LCL并网逆变器，有功无功解耦控制，控制精度高，响应速度快 ,三相LCL并网逆变器; 有功无功解耦控制; 高控制精度; 快速响应 ,三

    三相LCL并网逆变器：高精度快速响应的有功无功解耦控制技术,三相LCL并网逆变器，有功无功解耦控制，控制精度高，响应速度快。 ,三相LCL并网逆变器; 有功无功解耦控制; 高控制精度; 快速响应。,三相LCL逆变器高精度快速响应解耦控制

  • 一种基于Lifelogging视频的文本标签生成模型.pdf

    一种基于Lifelogging视频的文本标签生成模型.pdf

  • 基于黏菌优化算法（SMA）的改进与复现-融合EO算法更新策略的ESMA项目报告,黏菌优化算法（SMA）复现（融合EO算法改进更新策略）-ESMA 复现内容包括:改进算法实现、23个基准测

    基于黏菌优化算法（SMA）的改进与复现——融合EO算法更新策略的ESMA项目报告,黏菌优化算法（SMA）复现（融合EO算法改进更新策略）——ESMA。 复现内容包括:改进算法实现、23个基准测试函数、多次实验运行并计算均值标准差等统计量、与SMA对比等。 程序基本上每一步都有注释，非常易懂，代码质量极高，便于新手学习和理解。 ,SMA复现;EO算法改进;算法实现;基准测试函数;实验运行;统计量;SMA对比;程序注释;代码质量;学习理解。,标题：ESMA算法复现：黏菌优化与EO算法融合改进的实证研究

Global site tag (gtag.js) - Google Analytics