阿里云「飞天发布时刻」2024来啦!新产品、新特性、新能力、新方案,等你来探~ 了解详情
写点什么

用于展现图表的 50 种 JavaScript 库

  • 2013-01-23
  • 本文字数:1778 字

    阅读完需:约 6 分钟

在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些 JavaScript 库,从而更有效地达到想要的目标。最近, TechSlide 上的一篇文章总结了 50 种用于展现图表的 JavaScript 库,并对每种库做了简要的说明。这对于想要选择合适 JavaScript 库的开发者很有参考意义。

文章作者首推的库是 D3 ,他说到:

它非常让人惊叹,我很喜欢它的简洁性。它的文档非常完备,源代码托管在 GitHub 上,而且不断会添加新的示例。有一种叫做 Tributary 的创建 D3 原型的工具,其中有很多非常棒的示例。这个库非常好,以至于 xcharts、nvd3、Rickshaw、Cubism.js、dc.js、xkcd 都是基于它构建的。如果你想要做出优秀的自定义数据可视化效果,那么 D3 可能是你最佳选择,或者对于更简单的图,你可以选择上面所提到的基于 D3 的库。最后,我强烈推荐阅读 Scott Murray 关于 D3 的免费书《 Interactive Data Visualization for the Web 》和《 Dashing D3 tutorials 》。

接下来,他列举并简要说明了其它用于展现数据、制作表格和图表的 JavaScript 库,列在前 20 位的如下:

  • HighCharts ——它非常强大,你可以在 JSFiddle 中查看和编辑大量示例。它不免费,但拥有很多客户(IBM、NASA、MasterCard 等)。它还向下兼容 IE 8。
  • jqPlot ——如果你已经在使用 jQuery,不想为 HighCharts 付费,而且情况很简单,不需要 D3 那样复杂的库,那么 jqPlot 是很好的选择。
  • dygraphs ——一种开源的 JavaScript 库,可以做出可交互、可缩放的时间线图表。对于大数据集合非常适用。
  • Protovis ——和 D3 出自同一支团队之手,是一种免费的开源库。你可以查看这个 stackoveflow 页面来了解 D3 与其的区别。
  • Flot Charts ——与 jqPlot 一样,Flot 是一种针对 jQuery 的纯 JavaScript 库,专注于简单的用法、引人注目的外观和交互特性。
  • Google Chart Tools ——强大、免费、易于使用。内容丰富,从最简单的线状图到负责的层级树状图都有,在展示页面中提供了大量设计良好的图表类型。
  • dc.js ——基于 D3 的 JavaScript 图表库,拥有本地跨过滤器(crossfilter)的支持,并让你可以高效率地浏览大型多维数据集。
  • xcharts ——基于 D3 用于构建自定义图表的库。
  • nvd3 ——让你可以构建可重用的图表和图表组件,同时具有 d3.js 的强大功能。
  • rickshaw ——用于创建可交互时间线图表的 JavaScript 工具。
  • Cubism.js ——用于可视化时间线的 D3 插件。使用了 Cubism 构建更好的实时仪表盘,可以从 Graphite、Cube 和其他源拉取数据。
  • xkcd ——让你可以使用 D3 在 JavaScript 中做出 XKCD 样式的图表。
  • jQuery Sparklines ——一种 jQuery 插件,可以直接在浏览器中创建小型的内嵌图表。
  • peity ——一种简单的 jQuery 插件,可以把元素的内容转换成简单的饼图、线图和柱状图。
  • BonsaiJS ——一种轻量级的图形库,拥有直观的图形 API 和 SVG 渲染器。
  • Flotr ——为 Prototype.js 所用的 JavaScript 图表库。它拥有很多特性,像对负数值的支持、鼠标跟踪、选定支持、缩放支持、事件挂钩、CSS 样式支持、在画布(canvas)中包含文字、旋转的标签、渐变颜色、图形标题和子标题、电子表格、CSV 数据下载等等。
  • ProtoChart ——物如其名,ProtoChart 让你可以使用 JavaScript 和 Prototype 创建很漂亮的图表。它是一种开源库。
  • Flotr2 ——HumbleSoftware 当前正在做的项目,让你可以使用 Canvas 和 JavaScript 创建图表。
  • jQuery-Visualize ——HTML 的 table 元素驱动的 HTML5 canvas 图表。也是针对 jQuery 的图表插件。
  • JS Charts ——基于 JavaScript 的图表生成器,只需要很少甚至不需要编码。免费版会有水印,可以通过付费去掉。
  • ……

文章中还列举的 JavaScript 库有: PlotKit MilkChart moochart moowheel table2chart Canvas 3D Graph TufteGraph ArborJS TimePlot gRaphael ICO Elycharts ZingChart RGraph Dojo Charting Bluff canvasXpress ccchart JIT JSXGraph Smoothie Charts YUI Charts amcharts Emprise JavaScript Charts FusionCharts JavaScript Diagram Builder jGraph Sencha Touch Charts Style Chart AwesomeChartJS 等,都各有千秋,如果你对这些库感兴趣的话,可以访问相应的链接或者阅读原文

这个列表对于想要利用 JavaScript 技术创建图表展现数据的开发者来说,非常具有参考意义,你可以从中选择最适合的库,从而高效、高质量地完成任务。

2013-01-23 02:5722916
用户头像

发布了 340 篇内容, 共 126.1 次阅读, 收获喜欢 13 次。

关注

评论

发布
暂无评论
发现更多内容

Vue项目中实现ElementUI按需引入

不叫猫先生

Vue Element UI 按需加载 6 月 优质更文活动

面试官:什么时候 MySQL 查询会变慢?

做梦都在改BUG

Java MySQL 数据库

vue2.x,vue3.x使用provide/inject注入区别

不叫猫先生

Vue 6 月 优质更文活动

【云原生】Docker的基本使用方法与优势

不叫猫先生

Docker 6 月 优质更文活动

中企出海困难重重?海外税务数字化解决方案来支招!

用友BIP

中企出海

线程池性能提升之道:核心线程数选择与定制实战

做梦都在改BUG

Java 多线程 线程池

【体验有奖】玩转 AIGC,函数计算 x 通义千问预体验,一键部署 AI 应用赢 Airpods

阿里巴巴云原生

阿里云 云原生 AIGC

深度学习应用篇-计算机视觉-图像分类[2]:LeNet、AlexNet、VGG、GoogleNet、DarkNet模型结构、实现、模型特点详细介绍

汀丶人工智能

人工智能 深度学习 计算机视觉 图像分类 6 月 优质更文活动

人工智能创新挑战赛:海洋气象预测Baseline[4]完整版(TensorFlow、torch版本)含数据转化、模型构建、MLP、TCNN+RNN、LSTM模型训练以及预测

汀丶人工智能

人工智能 数据挖掘 深度学习 LSTM 6 月 优质更文活动

选择优质的led透明屏的7个步骤

Dylan

产品、 LED显示屏 售后服务

前端AST详解,手写babel插件

不叫猫先生

6 月 优质更文活动

Vue3项目中Pinia状态管理工具的使用

不叫猫先生

Vue Pinia 6 月 优质更文活动

数字经济快速发展下企业需要什么样的数智平台?

用友BIP

企业数智化 数智平台

大学共享电单车合作投放准备工作

共享电单车厂家

共享电动车厂家 共享电单车投放 共享电动车合作 校内共享电动车

【Netty】「NIO」(三)剖析 Selector

sidiot

Java 后端 Netty 6 月 优质更文活动

中企出海,数智人力重构企智人效的人才供应体系

用友BIP

人力资源 中企出海 数智人力

GaussDB(DWS)查询过滤器原理与应用

华为云开发者联盟

数据库 华为云 华为云开发者联盟 企业号 6 月 PK 榜

立即报名 | Microservices June 微服务之月再度开启

NGINX开源社区

nginx 微服务

漫画告诉你什么是生成式 AI(二)

FN0

AIGC

测试左移右移,到底是什么?

老张

测试右移 测试左移

vue2.x与vue3.x中自定义指令详解

不叫猫先生

Vue 自定义指令

聚焦数智人力,让员工“跳槽”不再尴尬!

用友BIP

人力资源 数智人力

跨平台开发工具 kbone 实操经验分享

Onegun

小程序 跨平台 前端框架 kbone

前端内存泄漏详解

不叫猫先生

内存泄露 6 月 优质更文活动

苹果WWDC 2023发布会总结

楚少AI

wwdc WWDC 2023 苹果wwdc2023

漫画告诉你什么是生成式AI(一)

FN0

AIGC

【Netty】「NIO」(二)阻塞模式与非阻塞模式

sidiot

Java 后端 Netty 6 月 优质更文活动

顶象发布《车企App安全研究白皮书》,剖析车企App两大风险

说山水

【JavaScript】手写Promise

不叫猫先生

JavaScript Promise 6 月 优质更文活动

旺链科技赋能泳池卫士守护人身安全

旺链科技

区块链 泳池安全 泳池卫士

亚信科技AntDB数据库荣获赛宝优选信创优秀解决方案奖

亚信AntDB数据库

AntDB AntDB数据库 企业号 6 月 PK 榜

用于展现图表的50种JavaScript库_JavaScript_侯伯薇_InfoQ精选文章