推荐18个基于 HTML5 Canvas 开发的图表库

 

  如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐。很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用。HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素。HTML 5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大。今天,本文收集了一些非常好的基于 HTML 5 Canvas 的图表方案推荐给大家。

1. Visualize

Visualize通过Javascript从结构化的HTML表格获取数据并借助HTML5 Canvas把数据转换为可视化的图表。

2. rGraph

rGraph是一个基于HTML5 canvas的图表库。借助HTML5的特性可以生成各种类型的图表,例如饼图、条形图、圆环图、甘特图、雷达图等。

3. iGrapher

iGrapher是一个免费的基于Web的,分析和预测股票、货币和商品的市场走势的可视化工具。

4. Function Plotter

由Ed Mackey开发的函数图形绘制工具,使用Canvas绘制二维数学函数图形。

5. Building HTML5 Canvas Bar Graph

使用HTML5 Canvas元素和Javascript绘制条形图。

6. HTML5 Graph Slider

一个动态图形查看器,可通过JavaScript接收数据并即时更新到图表中。

7. Graph.tk

Graph.tk是一个开源的图形工具,可以以不同的风格呈现函数曲线。

8. Ticker Plot

Ticker plot也是一个开源项目,使用股票符号绘制走势图。

9. HumbleFinance

类似于Google的Flash财经图表工具,HumbleFinance是一个基于HTML5 canvas的图表项目。

10. Charting HTML5

一个HTML5 canvas实验项目,看看它用于呈现图表的特性。

11. Graphr

Graphr是一个使用JavaScript编写的计算器,由Richard Ye开发。

12. Snazzy Animated Pie Chart with HTML5 and jQuery

基于HTML5特性开发的饼图工具,拥有漂亮的动画效果。

13. AwesomeJS

AwesomeChartJS是一个简单的Javascript库,可用于创建基于HTML 5 Canvas元素的图表。

14. jsGraph

jsGraph是一个轻量的javascript库,用于结合HTML5呈现图表。

15. Facebook Privacy

基于Prototype开发的可视化数据图表。

16. ASK KEN

ASK KEN™是一个序列的节点连接图,可以让你通过可视化导航链接到Freebase服务提供的主题。

17. CanvasXpress

CanvasXpress是另外一个结合HTML5特性开发的跨浏览器图表库,兼容主流浏览器。

18. ZingChart

如果前面那些开源和免费的图表方案都满足不了你的项目,可以试试ZingChart,这是首个可以以Flash和HTML5 Canvas两种方案呈现图表的图表库。

深度阅读

1. Canvas Cheat Sheet

PDF 和 PNG 格式的 HTML5 Canvas 速查手册。

2. How to draw with HTML5 Canvas

如果使用 HTML5 Canvas 元素进行绘图。

3. Mozilla Canvas Tutorial

Mozilla提供的 HTML5 Canvas 元素教程。

4. HTML5 Canvas: The Basics

一步一步学习如何使用 HTML5 Canvas 元素。

5. W3Schools HTML5 Canvas

W3Schools 详细介绍了HTML5 Canvas,附带了基本的例子。

6. HTML5, Flex and Silverlight Charts: A Test of Performance

这篇文章对比了几种图表实现方案的性能:HTML5 charts vs. Flex charts vs. Silverlight charts

7. HTML5 Canvas Element Guide

非常好的 HTML5 canvas 元素教程。

8. 5 Clever Uses of the Canvas Tag

5个基于 HTML5 canvas 元素实现的非常棒的应用。

9. Canvas Demos

使用 HTML5 canvas 元素实现的游戏、工具和其它应用程序的示例及教程。

JQuery报表工具的更多相关文章

  1. web报表工具Stimulsoft Reports.Web在mvc项目中使用

    Stimulsoft Reports.Web,是一款可以直接在Web中编辑报表的报表工具 web项目技术框架mvc4+easyui+knockoutjs 1.在项目中添加引用 Stimulsoft.B ...

  2. 设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)

    EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...

  3. 7 款顶级开源 BI(商务智能)软件和报表工具

    在这个信息化时代,每分每秒都产生海量数据.在海量数据中,挖掘出有用的数据,并且能以较人性化.直观的方式展示这些数据,变得尤为重要.本文将介绍 7款顶级开源 BI(商务智能)软件和报表工具,用于商业数据 ...

  4. BIRT报表工具,直接导出EXCEL

    BIRT是一款基于JAVA的免费开源报表工具,使用起来也挺方便. 有时你可能不需要在浏览器中展示报表,然后在点击导出按钮保存为EXCEL, 这里提供一种方式,直接把报表导出为EXCEL下载. JS代码 ...

  5. paip.基于navicate mysql的自动化报表工具总结

    paip.基于navicate mysql的自动化报表工具总结 需要对信用卡数据分类统计.显示一个饼图... 用EXCEL比较麻烦,一旦数据库变动就要重新导出..使用PHP代码吧,还是比较麻烦,最好是 ...

  6. Stimulsoft Reports报表工具

    关于第三方的报表工具,网上的种类有很多,一些专门做报表工具的公司,还针对不同平台语言做了分别处理.总之功能都很强大,比较流行和使用广泛的貌似还是国外的产品,版本收费和中文资料匮乏,这都是不可避免的问题 ...

  7. highcharts js报表工具(报表插件)

    highcharts报表工具(报表插件.图表工具) highcharts效果在线演示(可查看源代码):  http://www.hcharts.cn/demo/index.php?p=56 Highc ...

  8. 国内BI工具/报表工具厂商简介

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...

  9. web报表工具FineReport使用中遇到的常见报错及解决办法(二)

    web报表工具FineReport使用中遇到的常见报错及解决办法(二) 这里写点抛砖引玉,希望大家能把自己整理的问题及解决方法晾出来,Mark一下,利人利己. 出现问题先搜一下文档上有没有,再看看度娘 ...

随机推荐

  1. bzoj 1500 [NOI 2005] 维修数列

    题目大意不多说了 貌似每个苦逼的acmer都要做一下这个splay树的模版题目吧 还是有很多操作的,估计够以后当模版了.... #include <cstdio> #include < ...

  2. 洛谷P1759 通天之潜水

    题目背景 直达通天路·小A历险记第三篇 题目描述 在猴王的帮助下,小A终于走出了这篇荒山,却发现一条波涛汹涌的河拦在了自己的面前.河面上并没有船,但好在小A有n个潜水工具.由于他还要背重重的背包,所以 ...

  3. IIS文件存在但报404问题解决

    遇到一个奇怪的问题,在IIS7.5中,一些样式和JS文件存在,但访问就是报404. 根据网上搜索到的解决方法,发现解决不了,不同同样的问题引起的. 网上解决: 1.没有配置合适的MIME信息,通过添加 ...

  4. NOI导刊2010提高(06) 黑匣子

    题目描述 Black Box是一种原始的数据库.它可以储存一个整数数组,还有一个特别的变量i.最开始的时候Black Box是空的.而i等于0.这个Black Box要处理一串命令. 命令只有两种: ...

  5. 【NOIP模拟&POJ2152】灰色的果实(树形DP)

    题意: Nebula 历 2014 年 12 月 17 日,欢迎来到异世界. 面对截然不同的新世界,你决定采取最普通但最为有效的方式来探索,那便 是徒步.准备好营地的一切,你开始了探索的旅程. 步行大 ...

  6. Python()-类命名空间和对象/实例命名空间

    类命名空间和对象/实例命名空间: 创建类, 就会创建一个类的名称空间, 空间:存储类的属性 属性: 静态属性:直接定义在类下面 & 和类名关联 的变量 对象属性:在类内和self关联 & ...

  7. Ubuntu 16.04安装SQLite Browser操作SQLite数据库

    安装: sudo apt-get install sqlitebrowser 启动:

  8. 学习swift从青铜到王者之swift枚举07

    空枚举 //空枚举 enum SomeEnumeration { // enumeration definition goes here } 枚举基本类型 //枚举基本类型 enum CompassP ...

  9. [Angular] Write Compound Components with Angular’s ContentChild

    Allow the user to control the view of the toggle component. Break the toggle component up into multi ...

  10. 自己定义Gradle插件之&quot;Hello World&quot;

    自己定义Gradle插件之"Hello World" 0.新建一个用于开发这个插件的目录 1.确定Plugin id Plugin id一般定义为java 包名. 由字母和数字及& ...