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

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

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

目前市场上有一些开源或商业的库用于创建仪表盘,在本文中,我们将会展示一些可帮助创建美观且可自定义的仪表盘的 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

结论 

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

项目管理者必知:适用于仪表盘项目的7个优秀JavaScript库的更多相关文章

  1. .NET程序员项目开发必知必会—Dev环境中的集成测试用例执行时上下文环境检查(实战)

    Microsoft.NET 解决方案,项目开发必知必会. 从这篇文章开始我将分享一系列我认为在实际工作中很有必要的一些.NET项目开发的核心技术点,所以我称为必知必会.尽管这一系列是使用.NET/C# ...

  2. Android项目的targetSDK>=23,在低于Android6.0的部分测试机(类似华为)上运行时出现的系统权限问题

    相信大家对Android6.0以上的动态权限已经有所了解,很多童鞋也已经跃跃欲试地将自己项目的targetSDK升级到了23及其以上,很不幸的是我也成为了其中一员,然而我还是图样图森破了,升级之后的问 ...

  3. 团队项目——编写项目的Spec

    团队项目--编写项目的Spec 一.Spec的目标        spec主要用来说明软件的外部功能,和用户的交互情况,主要用来说明软件内部的设计.图片编辑器是与生活息息相关的一个必备软件,随的流行, ...

  4. 09_Android中ContentProvider和Sqllite混合操作,一个项目调用另外一个项目的ContentProvider

    1.  编写ContentPrivider提供者的Android应用 清单文件 <?xml version="1.0" encoding="utf-8"? ...

  5. 错误 : 资产文件“项目\obj\project.assets.json”没有“.NETCoreApp,Version=v2.0”的目标。确保已运行还原,且“netcoreapp2.0”已包含在项目的 TargetFrameworks 中。

    升级 vs201715.6.3之后发布出现 错误 : 资产文件“项目\obj\project.assets.json”没有“.NETCoreApp,Version=v2.0”的目标.确保已运行还原,且 ...

  6. eclipse 导入包含子maven项目的maven项目时的正确方式(父子项目)

    eclipse 导入包含子maven项目的maven项目时的正确方式(父子项目) NO1 导入时依次选择 import > Maven > Existing Maven Projects ...

  7. eclipse 使用tomcat运行JavaWeb项目,文件修改后为何不用重启tomcat? (运行web项目的4种方式)探究

                    1.情景说明 在eclipse中,为什么Java文件修改后,重启tomcat class文件才能生效? 为什么jsp修改后,不需重启tomcat就能立即生效? 为什么静 ...

  8. Android studio 添加引用Module项目 与 设置Module项目的Libs的Jar在主项目里使用

    前言 添加引用Module项目 设置Module项目的Libs的Jar在主项目里使用 1.在项目里添加libs包,并且加入jar 2.设置这个module项目的build.gradle depende ...

  9. Bug2020011601,在ssh项目的applicaitonContext.xml中,少了一个双引号,打包成功(没报错),项目运行才发现

    在ssh项目的applicaitonContext.xml中,少了一个双引号,打包成功(没报错),项目运行才发现. 加上少的双引号,解决了.

随机推荐

  1. Bugzilla-5.0.3 (OpenLogic CentOS 7.2)

    平台: CentOS 类型: 虚拟机镜像 软件包: apache2.4.6 bugzilla5.0.3 mariadb5.5.47 perl5.16.3 apache bug tracking bug ...

  2. Codeforces 802I Fake News (hard)

    Codeforces 802I 题意:统计所有不同子串出现次数的平方的和. 想法:建一个SAM,$Ans=\sum (step[i]-step[fa[i]])*right[i]^2$ #include ...

  3. 面试中常见的 MySQL 考察难点和热点

    基本架构 MySQL是典型的三层架构模式,在平常使用中对MySQL问题排查和优化,也应该针对具体问题,从对应的层解决问题 服务层:经典的C/S架构,主要是处理连接和安全验证. 核心层:处理MySQL核 ...

  4. CSS3 - - Media(css3媒介查询) 属性

    语法结构及用法: @media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}  实际应用一 判断设备横竖屏: /* 这是匹配横屏的状态,横屏时的 ...

  5. 2018.2.8 php实现qq登陆接口

    PHP实现QQ登录的原理和实现过程 2018-02-08 学习与分享 PHP自学中心 第三方登录,就是使用大家比较熟悉的比如QQ.微信.微博等第三方软件登录自己的网站,这可以免去注册账号.快速留住用户 ...

  6. python_22_enumerate

    a=['a','d','f','g'] for i in enumerate(a): print(i) #enumerate 把列表的下表以元组的形式取出来 #结果 # (0, 'a') # (1, ...

  7. pymysql 简单操作数据库

    #!/usr/bin/env python #-*- coding:utf-8 -*- # author:leo # datetime:2019/4/24 15:22 # software: PyCh ...

  8. java基础面试题:switch语句能否作用在byte上,能否作用在long上,能否作用在String上?

    package com.swift; public class Switch_Test { public static void main(String[] args) { /* * switch语句 ...

  9. java中char类型转换成int类型的两种方法

    方法一: char ch = '9'; if (Character.isDigit(ch)){ // 判断是否是数字 int num = Integer.parseInt(String.valueOf ...

  10. BZOJ2118: 墨墨的等式(最短路 数论)

    题意 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及B的取值范围,求出有多少B可以使等式存在非负整数解. So ...