20 个最新的 JavaScript 数据可视化库

有很多 JavaScript 库可以将原本平淡无趣的数字数据渲染成美观、交互性强且信息丰富的可视化效果。使用 JavaScript 进行数据可视化的好处在于,如果创建正确,您的数据将非常容易访问(通常通过 HTML 表格)。很久以前(2008 年),我写过关于绘制和绘制数据图表的 JavaScript 解决方案的文章,本文重新讨论了这个主题,并介绍了 20 多个 JavaScript 库,您可以使用它们让您的数据变得生动有趣,而且完全免费。

1. Highcharts
HighchartsHighcharts是最近最有前途的 JavaScript 图表库之一,它拥有丰富的功能,包括七种图表类型(其中包括线形图、饼图和条形图)、放大和缩小图表的功能以及提供有关数据点的更多信息的工具提示。该库有许多自定义选项,并且它们都记录在一个页面上,方便参考。

2. gRaphaël
拉斐尔gRaphaël是一个基于Raphaël的图表库,Raphaël 是一个矢量图形绘制 JavaScript 库。该库分为多个子库,因此您可以只下载想要创建的图表类型。主库 g.raphael.js 仅 12KB,子库大小在 4KB 到 8KB 之间,对于 Web 开发人员来说,这是一个轻量级但功能齐全的 JavaScript 图表解决方案。

3.JavaScript InfoVis 工具包
JavaScript InfoVis 工具包JavaScript InfoVis是一个图表库,部分受 MooTools 影响,是数据可视化的强大而出色的解决方案。它是模块化的(就像 MooTools 一样),因此您可以只包含所需的部分以保持页面简洁。它具有动画效果功能,可以吸引和吸引用户,具有多种图表类型、用于处理 JSON 数据的辅助类等等。

JavaScript InfoVis 工具包演示

4. jQuery Visualize 插件
jQuery 可视化插件如果您已经在使用 jQuery,那么您应 顶级电子邮件列表 该考虑使用插件来满足您的可视化需求。jQuery Visualize是一款由 Filament Group(jQuery UI 的核心开发人员)开发的插件,它是一款使用 HTML5 的画布元素生成图表的 jQuery 插件。它有 14 个选项可用于自定义图表。

不要忘记尝试一下他们的可配置演示。

5. moochart
穆查特目前,moochart仅绘制气泡图,但计划扩展此 MooTools 1.2 插件以支持饼图、折线图和条形图。该插件有 14 个选项可用于自定义图表的外观,以及当鼠标悬停在气泡上时提供有关气泡的更多信息的工具提示。moochart是开源的,并根据MIT 许可证发布。

moochart 演示
moochart 下载
6. JS 图表
JS 图表JS Charts强调最终用户能够以很少甚至根本不需要编码的方式使用该库,因此易于使用,非常适合那些希望绘制数据图表而又不想花太多时间学习如何编写 JavaScript 的网页设计师。JS Charts 有一个基于 Web 的 GUI,并为您的图表提供托管服务,以减轻您自己的服务器的负载。它支持三种图表类型:条形图、饼图和折线图。

JS 图表演示
JS 图表下载
7. 音标
音标dygraphs是一个 JavaScript 可视化库,用于生成时间序列数据的交互式图表。它旨在绘制密集数据集(例如温度波动)。它具有用户界面选项,例如让用户能够动态指定时间间隔、将鼠标悬停在图表的某些部分时显示值以及缩放。

它还与Google Visualization API集成

8. JSXGraph
JSXGraphJSXGraph由德国拜罗伊特大学开发,是一个独立的 JavaScript 库,用于绘制复杂的几何形状和数据,如贝塞尔曲线、微分方程等。它具有用于移动图形的动画功能、用于尝试改变变量值的滑块等交互式组件,以及多种可供选择的图表类型。

JSXGraph 演示
JSXGraph 下载
9. Protochart
原图Protochart是一个与 Prototype JS 框架配合使用的 JavaScript 库。它使用 HTML5 的画布(适用于现代浏览器)和ExCanvas 库(适用于 Internet Explorer 支持)。它有六种图表类型,包括线图、饼图、条形图、点图、带点的线图和面积图。

它允许显示高度可配置的图例,以帮助识别图表上的项目。

10.虚张声势
虚张声势Bluff是一个轻量级图表库,它将 Ruby 的 Gruff 移植到了 JavaScript。压缩后大小只有 11KB(您还需要 JS.Class,压缩后大小只有 2.6KB),令人惊讶的是,您可以从这个库中获取 15 种不同类型的图表。它具有工具提示、大量可配置选项、图例支持以及用于声明可重复使用主题的 .set_theme 方法。

11.样式表
样式表Style Chart是一款免费的基于 JavaScript 的图表 Web 服务/API,用于创建托管图表。如果您想要托管自己的图表,也可以将其作为可下载库使用(不过您需要注册才能下载)。它具有您期望从强大且可配置的图表库中获得的功能,例如工具提示、图例和 19 种类型的图表,包括 3D 饼图、3D 条形图和帕累托图。

绘图jqPlot是 Chris Leonello 开发

的另一个用于数据可视化的 jQuery 插件。它是开源的,包含两套许可:MIT 和 GPL 版本 2。它有许多选项可供您利用,以便真正自定义您的图表。

jQuery 迷你图jQuery Sparklines是一款简单轻量的 jQuery 插件,用于绘制动态迷你图(压缩数据图)。它强调易用性和最少的编码;您只需一行 JavaScript 代码即可创建复杂的迷你图。压缩和 gzip 压缩后,该插件仅重 4.7KB,因此不会拖慢您的页面响应时间。

jQuery Google 图表jQuery Google Charts(简称 jGCharts)由 Massimiliano Balestrieri 开发,是一款用于与Google Charts API配合使用的数据可视化 jQuery 插件。它拥有多种图表类型,包括动态生成的 3D 饼图。它有一个正在开发中的 GUI(仍为 alpha 版本),可让您使用图形前端轻松创建图表。

jQuery Google 图表演示
jQuery Google Charts 下载
15. 带工具提示的画布饼图
带工具提示的画布饼图此 MooTools 类/插件用于使用画布元素绘制饼图。它基于Stoyan Stefanov 的Canvas pie。对于只对绘制饼图感兴趣的 MooTools 开发人员来说,这是一个简单直接的数据可视化选项。

图夫特图TufteGraph是一款强调

顶级电子邮件列表

易用性和极简主义的 jQuery 插件。它只提供一些样 揭开魔法的面纱:调味品包装机 式选项,而是依靠 CSS 来自定义图表的外观和感觉,这最终意味着您的网页将呈现得更快,因为 JS 的工作量更少。观看TufteGraph 的介绍视频。

时间线时间轴是一个 JavaScript 小部件,用于创建交互式时间轴。您可以使用鼠标滚轮或按住时间轴上的鼠标按钮并向左或向右拖动,按时间顺序滚动浏览项目。单击代表时间轴中项目的点将显示更多信息。

普罗托维斯Protovis是一个用于绘制数据图表的数据可视化库。Protovis 由斯坦福可视化小组创建。它使用 JavaScript 和 SVG 动态绘制数据。

牛奶图表milkchart是一

个需要 MooTools 的 JavaScript 图表/图 ge 列表 形库。milkchart 使用 HTML5 的 Canvas 元素将 HTML 数据表呈现为五种图表类型之一:柱状图、条形图、折线图、散点图和饼图(未来计划扩展为面积图)。milkchart 在Apache 许可下是开源的。

时间图Timeplot允许您动态生成时间序列图。将鼠标悬停在数据点上即可显示其值。Timeplot 是麻省理工学院 SIMILE 项目的一部分。

以下是关于如何使用 Timeplot 的分步教程。Timeplot 是开源的,可以使用 BSD 许可证。Timeplot 演示和下载链接位于此页面上。

Timeplot 演示和下载信息
概括
让数据变得生动是网页设计的一个重要部分。对于任何包含大量数据的网站,例如财务顾问或房地产经纪人的网站,Javascript 都非常有用。它可以让数据表脱颖而出,而不是那么乏味,所以我强烈建议利用它。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注