蓝戒博客

  • 首页
  • 研发说
  • 架构论
  • 效能录
  • AI谈
  • 随笔集
智构苍穹
AI为翼,架构为骨,文化为魂,实践探新境,价值筑长青。
  1. 首页
  2. 研发说
  3. 正文

13款JavaScript图形和图表绘制工具

2014年4月28日 7549点热度 0人点赞 0条评论

导读:本文作者Kevin Liew是一名Web设计师和开发者,热衷于Web开发、前端开发以及jQuery。

如今,在互联网上发布在线免费的Javascript图形和图表绘制工具越来越多。作者此前在一家网站从事复杂的图形学方面的工作,使用 highchart,在那期间,没有大量的插件工具可供选择,不像现在,我们可以轻易地找到非常有用的图表库。作者认为,此种插件的兴起源于:

  1. Flash 是最佳的解决方案,大部分人从这方面迁移的;
  2. 现在的浏览器和强大的计算机使其在实时数据方面的能力更加的容易;
  3. 绘制矢量图的工具(技术取向)不同:VML、SVG、Canvas。

当然,你也可以根据自身需求进行选择,正如之前提到的,使用各种技术导致一些插件只能在现代的浏览器的下支持canvas,其他一些技术结合在一起可运行在不同的平台上或旧版本的浏览器上。

在这篇文章中,我们搜集了13个JavaScript插件可用于绘制图形和图表。还有一部分是独立的框架支持bars, lines, pies甚至还有一些更加复杂的图形,比如,plots, Venn diagrams, heatmaps, newick trees, 2D-scatter plots, 2D-scatter bubble plots, 3D-scatter plots。

1. Flotr2

pic1

Flotr2是一个独立框架,支持HTML5绘制图表和图形。它是flotr 的分支,可移除 Prototype的依赖,包含许多改进,支持lines, bars, candles, pies and bubbles charts。支持旧版本的浏览器如IE6和移动平台。

2. Rickshaw

pic2

Rickshaw是一种用于创建交互式时间列图的JavaScript工具箱。它依赖于D3可视化库、Query扩展和jQuery UI。

3. D3

pic3

一款出色且高效的可视化库,可用于图表的插件。使用D3你可以捆绑任意一个数据到DOM(Document Object Model),然后采用数据驱动转化成文件。 作为一个示例,你可以用D3从数组中生成一个基本的 HTML表格。或者你也可以利用相同的数据来创建一个互动的SVG柱状图。

4. AwesomeChartJS

pic4

AwesomeChartJS作为一个简单的Javascript库,它可以被用来创建基于HTML 5 canvas元素的图表。目的是让用户只需用几行代码就可创建一个简单的图表。

5. CanvasXpress

pic5

CanvasXpress是一个Javascript库利用tag在HTML5中执行任务,该库开发的目的是为 BMS系统生物学平台创建可视化的核心组件。它适用于高度复杂的图表和图形。

6. HumbleFinance

pic6

HumbleFinance是HTML5数据可视化编译工具。作为交互式图形的范本,与Flash工具类似,工具本身是用JavaScript编译的,使用Prototype和Flotr 库,它可以用于显示实际数值共享一个轴的任意两个2D数据集。

7. Graph

pic7

Graph是HTML5 Javascript图表库支持超过20种不同类型的图表。使用HTML5 canvas标签,RGrap可以在Web浏览器中创建Javascript图表。也是就说页面响应时间更快,Web服务器加载时间更少。

8. dygraphs

pic8

dygraphs是一个开源的 JavaScript库,可生成时间系列的交互式zoomable图表。它的设计是被用来显示密集型的数据集,能够让用户探索和解释这些数据。这是一款轻量级的解决方案,运行在IE中。

9. Highchart

pic9

Highchart是用纯JS编写的图表库,给你的网站或者Web应用呈现最直观、交互式的图表。 Highcharts 目前支持 line, spline, area, areaspline, column, bar, pie and scatter等图表类型。这个著名的图表解决方案曾被许多知名的企业使用,比如 IBM, NASA, Siemens, HP等。

10. gRaphael

pic10

gRaphael的目标是为您的网站创建绝妙的图表,基于Raphaël 图形库。通过示例能看到静态和动态的图表场景。gRaphaël目前支持Firefox 3.0+,Safari 3.0+, Opera 9.5+、IE 6.0+以上版本。

11. jqPlot

pic11

jqPlot是jQuery Javascript 框架的绘图和图表插件。 jqPlot能绘制出美妙的line,bar和pie图形,具有许多独特的性能。

12. JS Charts

pic12

JS Charts是JavaScript只需很少或者无需代码即可实现的图形生成器。利用JS来绘制图表既简单又容易,因为你只需要客户端脚本即可实现(通过 Web浏览器实现)。无需额外的插件或者服务器模块。只需要准备脚本、XML图表数据,JSON或JavaScript Array和绘图工具即可。

13. JSXGraph

pic13

JSXGraph是一款跨浏览器的交互式几何图、函数绘图、图表的数据可视化工具。它完全在JavaScript实现,不依赖于任何库,并且使用SVG,VML和canvas。JSXGraph容易嵌入网页中,体积小,小于100K字节。无插件,采取特别措施优化性能。

 

标签: js库 图表
最后更新:2025年9月13日

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

最新 热点 随机
最新 热点 随机
npm 安全更新:把握令牌变更与发布体系的迁移参考指南 TresJS:用 Vue 构建现代化交互式 3D 体验 i18n 高效实现方案:前端国际化神器安利一波 前端国际化 i18n 实践:从项目到组件库的全链路方案 GEO(生成引擎优化)完整指南:AI 搜索时代的企业内容新机会 NativeScript:用 JavaScript / TypeScript 构建真正的原生应用
前端开源工具 PinMe:极简部署体验分享大屏适配的核心痛点与一行 autofit 解决方案markdown-exit:现代化的 Markdown 解析工具Lerna + Monorepo:前端多仓库管理的最佳实践CrewAI:基于角色协作的 AI Agent 团队框架浅析2025 最推荐的 uni-app 技术栈:unibest + uView Pro 高效开发全攻略
大屏适配的核心痛点与一行 autofit 解决方案 Vue 2 安全漏洞深度解析与修复:CVE-2024-9506 & CVE-2024-6783 当孩子说“我喜欢这样的自己”:幼儿教育的意义 UniApp 进阶实战篇:Vue3 + Pinia + uViewPlus 构建企业级多端项目 前端攻城师一定要做的6件事 AngularJs中ui-router全攻略
最近评论
渔夫 发布于 1 个月前(11月05日) 学到了,感谢博主分享
沙拉小王子 发布于 8 年前(11月30日) 适合vue入门者学习,赞一个
沙拉小王子 发布于 8 年前(11月30日) 适合vue入门者学习,赞一个
cywcd 发布于 9 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8
cywcd 发布于 9 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8

COPYRIGHT © 2025 蓝戒博客_智构苍穹-专注于大前端领域技术生态. ALL RIGHTS RESERVED.

京ICP备12026697号-2