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

作为项目经理，经常会面临“我们的进度怎么样了，接下来会怎么样？”这样的问题。如何用最少的几个关键指标说明项目的整体情况成为考验项目管理者的大难题！

就像开汽车，虽然汽车运行中的各种参数非常多，但仪表盘上只要显示速度、转速、油量、水温等基本信息可以确保正确驾驶。对于刹车、离合、机油和安全气囊等其他信息，只在有问题的时候报警。这样驾驶者就可以将注意力集中方向、速度和道路情况上，而不必去关注大量的数据。所以“要是能用个仪表盘一样的东西把项目最主要的数据信息显示出来就好了！”

目前市场上有一些开源或商业的库用于创建仪表盘，在本文中，我们将会展示一些可帮助创建美观且可自定义的仪表盘的 JavaScript 库，希望可以对您的工作有所裨益。

在介绍这7款JavaScript库之前，我们先来了解一个问题：项目管理者在仪表盘开发中应该起到什么作用？

项目管理者在仪表盘开发中的作用

要实现一个仪表盘方案的交付需要许多人的通力合作，项目管理员的职责就是将每一个成员紧密的结合起来，并高效的完成项目开发工作，同时管理项目的开发进度。项目管理员主要关注两个方面：

1）数据

正如前面所提到的，数据是项目中最复杂的部分。这是因为已经存在的数据库架构和仪表盘需求总是无法匹配起来，开发人员必须付出艰辛的努力来确保商业指标背后有数据，如果没有数据，数据库架构就不得不扩展或重新设计以匹配新的数据。项目管理员可以咨询数据库团队关于这部分工作大概需要的时间，以作出合理分配。

2）选择仪表盘系统

需求总是不停的在变化，这是任何软件开发都不得不面对的事实。IT团队应该和商业分析师合作，确保选中的仪表盘系统能够把握变化着的需求。唯一能将变化带来的风险最小化的方法是根据个人经验和对仪表盘系统的掌握情况。

7大优秀JavaScript库

1. Gridster.js

 

Gridster.js 是Ducksboard的开源项目。它是一个 jQuery 插件用来构建直观的可拖放的布局，支持多列布局，你还可以动态的添加和删除表格中的元素，甚至可以获得一个具有所有小部件位置的对象的 JavaScript 数组，从而可以在以后使用这些数组来加载小部件。

主要特性：

只依赖jQuery；

支持元素的添加和删除；

文档比较全；

拥有测试用例，你可以查看你的浏览器的测试结果；

比较适合开发益智游戏；

点击文档查看更多信息

源代码：https://github.com/dsmorse/gridster.js

2. angular-gridster

 

这是一个用于 Angular JS 的格子状小部件的实现。它具有 jQuery gridster 插件等功能，但也具有一些其他的功能。它完全使用 Angular 指令重写，并允许使用 Angular 的数据绑定功能。查看文档以了解更多信息。

源代码：https://github.com/ManifestWebDesign/angular-gridster

3. gridstack.js

 

gridstack.js 是一个用于小部件布局的 jQuery 插件，主要是受到gridster.js的启发开发而成。它是一个可拖放的多列网格。此外，它还允许你构建可拖拽的响应式 Bootstrap v3 的友好布局。

它还适用于 knockout.js、angular.js 以及触摸设备等。查看gridstack.js文档以了解更多。

源代码：https://github.com/troolee/gridstack.js

4. jQuery Gridly

jQuery Gridly 是个网格式的拖放移位 jQuery 插件，此插件还有其它特色功能，比如关闭、点击放大、增加模块等等 。点击文档了解 Gridly。

源代码：https://github.com/ksylvest/jquery-gridly

5. Packery

Packery 是一个 JavaScript 库和 jQuery 插件，可用于生成无缝且可拖拽的布局。它使用 bin-packing 算法来填充空隙，其布局可以是智能有序的，也可以是有组织狂野的。节点可以被固定在某一处，或找到某一处完美的地方，也可以被随意拖动。

它适合用来创建一个可拖拽的仪表盘以及无缝的 “砖石图像画廊（Masonry image galleries）”布局。点击文档了解 Packery。

源代码：https://github.com/metafizzy/packery

6. GridList

 

GridList是一个构建在GridList 类之上的 jQuery 库，它是一个响应式可拖拽网格布局，可以动态增加网格，改变网格的大小，根据网格数量及尺寸计算网格进行合理的流体布局。点击文档了解更多信息。

源代码：https://github.com/hootsuite/grid

7. Dazzle

 

Dazzle 是使用 React JS构建仪表盘的库。它不依赖于任何前端库，但这一因素使它更容易与前端库相集成。它允许你使用它来创建基于网格的布局，添加或删除小部件以及拖放小部件等。点击查看演示步骤。

源代码：https://github.com/Raathigesh/dazzle

结论

最终，你选择投入使用的库还是要归结为个人的偏好以及您和您的团队工作的类型等因素。因此，选择符合您项目需求的产品会帮助你节省时间和金钱，实现最佳的工作效益。