文档章节

适用于仪表盘项目的 7 个优秀 JavaScript 库

编辑部的故事
 编辑部的故事
发布于 2017/04/05 19:54
字数 761
阅读 4845
收藏 237

现在有很多各种各样的 JavaScript 库,但这里将介绍 7 个很优秀的可用于你下一个 JavaScript 项目的库。

仪表盘是用于目标或业务流程的视觉指示工具,也用于切割杂乱无章的数据,从而分割出要点的重要工具。它可帮助评估信息,并及时做出正确的决定。实时可视化的仪表盘由图标、测绘图、图形符号,以及数据表格等组成。

目前有一些开源或商业的库用于创建仪表盘。在本文中,我们将会展示一些可帮助创建美观且可自定义的仪表盘的 JavaScript 库。

0. Gridster.js

Gridster 是一个 jQuery 插件,可以从跨多个列的元素构建直观的可拖拽布局。

它可以让你从网格中动态添加或删除小部件,甚至可以获得一个具有所有小部件位置的对象的 JavaScript 数组,从而可以在以后使用这些数组来加载小部件。

查看 文档 以了解更多信息。

1. angular-gridster

这是一个用于 Angular JS 的格子状小部件的实现。它具有 jQuery gridster 插件等功能,也具有一些其他的功能。

它完全使用 Angular 指令重写,还可以使用 Angular 的数据绑定功能。查看 文档 以了解更多信息。

2. gridstack.js

gridstack.js 是一个用于小部件布局的 jQuery 插件,灵感来自 gridster.js。这是一个可拖放的多列网格,可让你构建可拖拽的响应式 Bootstrap v3 的友好布局,

它还适用于 knockout.jsangular.js 和触摸设备。查看 gridstack.js 文档以了解更多。

3. jQuery Gridly

Gridly 是一个 jQuery 插件,可用于拖放以及在网格中调整大小。点击这里 了解 Gridly。

4. Packery

Packery 是一个 JavaScript 库和 jQuery 插件,可用于生成无缝且可拖拽的布局。它使用 bin-packing 算法来填充空隙。

它适合用于创建一个可拖拽的仪表盘和无缝的 “砖石图像画廊” 布局。点击这里 了解 Packery。

5. GridList

一个构建于 GridList 类之上的 jQuery 库,通过拖放功能将通用条目的位置转换为响应式的 DOM 元素。

点此查看 DEMO

6. Dazzle

Dazzle 是使用 ReactJS 用于构建仪表盘的库,它不依赖于任何前端库,这使得它更容易与前端库集成。

你可以使用它创建基于网格的布局,添加或删除小部件,以及拖放小部件。点击这里查看 DEMO

结论

最后,你选择使用的库还是要考虑到个人的偏好以及你和你团队工作的类型。因此,选择符合项目需求的产品会帮助你节省时间和金钱。

编译自:DZone

转载请注明出处

© 著作权归作者所有

共有 人打赏支持
编辑部的故事

编辑部的故事

粉丝 1281
博文 258
码字总数 477342
作品 0
深圳
运营/编辑
私信 提问
加载中

评论(2)

Tumbler康
Tumbler康
请问这个博客,你是如何换行的
天豪-Jason
天豪-Jason
嗯 不错!感谢分享
最受欢迎的十款 AngularJS 开发工具

AngularJS 是 Google 推出的一款 Web 应用开发框架。它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定、DOM 操作、MVC 设计模式和模块加载等,同时也是那些想要以动态形式开发 Web ...

葡萄城技术团队
2017/01/13
8.8K
3
给开发者提供的 35 款 JavaScript 图形图表库

图表是数据图形化的表示,也就是“通过形象的图表来展示数据,比如条形图,折线图,饼图”。几乎每个开发或者项目管理团队都需要图表或者图形来简化 理解,可视化复杂的数据和 web 应用工作流...

oschina
2014/02/24
59.6K
13
10个强大的Javascript表单验证插件推荐

创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的。本文介绍了10个不错的JavaS...

leon_rock
2012/04/20
41.4K
4
7个优秀的javascript资源

作者:Kelli Shaver 翻译:Terry li - GBin1.com - 2011/07/13 英文:7 Great JavaScript Resources 随着服务器端和浏览器技术发展,各种新旧的类库都跟随着进化了。作为一个JS开发人员,我们...

gbin1
2011/07/13
1K
0
用 ChartJS 创建动态仪表盘

下载源码 在线Demo 在线演示请点击这里。 今天我们将会用ChartJS来创建一个动态仪表盘。ChartJS是一个强大、无依赖的JavaScript库,通过canvas元素来创建图表。最重要的是设计人员可以自己轻...

yale8848
2013/08/19
15K
5

没有更多内容

加载失败,请刷新页面

加载更多

第11章 多线程

程序、进程、线程 程序(program)是为完成特定任务、用某种语言编写的一组指令的集合。即指一段静态的代码,静态对象。 **进程(process)**是程序的一次执行过程或是正在运行的一个程序。动...

流小文
14分钟前
1
0
SpringBoot引入第三方jar包或本地jar包的处理方式

在开发过程中有时会用到maven仓库里没有的jar包或者本地的jar包,这时没办法通过pom直接引入,那么该怎么解决呢 一般有两种方法 - 第一种是将本地jar包安装在本地maven库 - 第二种是将本地j...

独钓渔
今天
2
0
五、MyBatis缓存

一、MyBatis缓存介绍 缓存的使用可以明显的加快访问数据速度,提升程序处理性能,生活和工作中,使用缓存的地方很多。在开发过程中,从前端-->后端-->数据库等都涉及到缓存。MyBatis作为数据...

yangjianzhou
今天
2
0
最近研究如何加速UI界面开发,有点感觉了

最近在开发JFinal学院的JBolt开发平台,后端没啥说的,做各种极简使用的封装,开发者上手直接使用。 JBolt开发平台包含常用的用户、角色、权限、字典、全局配置、缓存、增删改查完整模块、电...

山东-小木
今天
3
0
《月亮与六便士》的读后感作文3000字

《月亮与六便士》的读后感作文3000字: 看完英国作家威廉.萨默塞特.毛姆所著《月亮与六便士》(李继宏译),第一疑问就是全书即没提到“月亮”,也没提到“六便士”。那这书名又与内容有什么...

原创小博客
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部