当前位置:  开发笔记 > 编程语言 > 正文

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

如今,HTML5可谓如众星捧月一般,受到许多业内巨头的青睐。很多Web开发者也尝试着用HTML5来制作各种各样的富Web应用。HTML5规范引进了很多新特性,其中最令人期待的之一就是Canvas元素。H...">

 

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

 

1. Visualize

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

2. rGraph

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

3. iGrapher

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

4. Function Plotter

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

5. Building HTML5 Canvas Bar Graph

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

6. HTML5 Graph Slider

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

7. Graph.tk

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

8. Ticker Plot

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

9. HumbleFinance

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

10. Charting HTML5

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

11. Graphr

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

12. Snazzy Animated Pie Chart with HTML5 and jQuery

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

13. AwesomeJS

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

14. jsGraph

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

15. Facebook Privacy

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

16. ASK KEN

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

17. CanvasXpress

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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

18. ZingChart

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

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


推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • angular.element使用方法及总结
    2019独角兽企业重金招聘Python工程师标准在线查询:http:each.sinaapp.comangularapielement.html使用方法 ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • 025_JavaScript数组方法
    1.把数组转换为字符串1.1.toString()方法1.1.1.toString()方法把数组转换为数组值(逗号分隔)的字符串,并返回结果。1.1.2.语法arrayOb ... [详细]
  • Hadoop源码解析1Hadoop工程包架构解析
    1 Hadoop中各工程包依赖简述   Google的核心竞争技术是它的计算平台。Google的大牛们用了下面5篇文章,介绍了它们的计算设施。   GoogleCluster:ht ... [详细]
  • OAuth2.0指南
    引言OAuth2.0是一种应用之间彼此访问数据的开源授权协议。比如,一个游戏应用可以访问Facebook的用户数据,或者一个基于地理的应用可以访问Foursquare的用户数据等。 ... [详细]
  • 原文:http:blog.linjunhalida.comblogpjaxgithub:https:github.comdefunktjquery-pjax ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
author-avatar
Mr-Leo-Chan
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有