JustGage 是一个 JavaScript 插件来生成很漂亮的仪表盘，基于 Raphaël 库做向量图绘制。

JustGage 完全基于 SVG,因此支持几乎所有浏览器，包括：IE6+, Chrome, Firefox, Safari, Opera, Android, etc.

官网地址：http://www.justgage.com/

简单例子

<!doctype html>

<html>

  <head>

    <title>Customize style</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style>

      body {

        text-align: center;

      }

      #g1 {

        width:200px; height:160px;

        display: inline-block;

        margin: 1em;

      }

      p {

        display: block;

        width: 450px;

        margin: 2em auto;

        text-align: left;

      }

    </style>

    <script src="resources/js/raphael.2.1.0.min.js"></script>

    <script src="resources/js/justgage.1.0.1.min.js"></script>

    <script>

      window.onload = function(){

      var g1 = new JustGage({

        id: "g1",

        value: getRandomInt(0, 100),

        min: 0,

        max: 100,

        title: "Custom Width",

        label: "test"

      });

        setInterval(function() {

          g1.refresh(getRandomInt(0, 100));

        }, 2500);

      };

    </script>

    </head>

  <body>

    <div id="g1"></div>

  </body>

</html>

效果如下

可配置参数如下

id :                    string              元素的ID container element id

title :                 string              仪表盘的标题 gauge title text

titleFontColor :        string              仪表盘标题的字体颜色 color title text

value :                 int                 仪表盘的值 value gauge is showing

valueFontColor :        string              仪表盘值的字体颜色 color of value text

min :                   int                 仪表盘的最小值 minimum value

max :                   int                 仪表盘的最大值 maximum value

showMinMax :            bool                是否展示仪表盘的最大最小值 hide or display min and max values

gaugeWidthScale :       float               仪表盘管道的宽度 width of the gauge element

gaugeColor :            string              仪表盘管道的颜色 background color of gauge element

label :                 string              仪表盘值下的文字 text to show below value

showInnerShadow :       bool                是否显示内阴影 whether to display inner shadow

shadowOpacity :         float               阴影透明度 shadow opacity, values 0 ~ 1

shadowSize :            int                 阴影的大小 inner shadow size

shadowVerticalOffset :  int                 阴影偏移量 how much is shadow offset from top

levelColors :           array of strings    设置颜色数组如levelColors: ["#00fff6","#ff00fc","#1200ff"]，则将数值均匀分成三段，从小到大依次匹配颜色数组中的值  colors of indicator, from lower to upper, in hex format

levelColorsGradient :   bool                是否使用渐进的或基于扇区的颜色变化 use gradual or sector-based color change

labelFontColor :        string              仪表盘值下文字的字体颜色color of label showing label under value

startAnimationTime :    int                 动画开始时间 length of initial load animation

startAnimationType :    string              动画类型 type of initial animation (linear, >, <, <>, bounce)

refreshAnimationTime :  int                 刷新动画的时间 length of refresh animation

refreshAnimationType :  string              刷新动画的类型 type of refresh animation (linear, >, <, <>, bounce)

数据可视化(2)--Justgage的更多相关文章

  1. 2018年最佳JavaScript数据可视化和图表库

    现在有很多图表库,但哪一个最好用?这可能取决于许多因素,如业务需求,数据类型,图表本身的目的等等.在本文中,每个JavaScript图表库将与一些关键因素进行比较,包括图表类型,商业或免费和开源状态. ...

  2. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  3. flask+sqlite3+echarts2+ajax数据可视化报错：UnicodeDecodeError: 'utf8' codec can't decode byte解决方法

    flask+sqlite3+echarts2+ajax数据可视化报错: UnicodeDecodeError: 'utf8' codec can't decode byte 解决方法: 将 py文件和 ...

  4. 手把手教你用FineBI做数据可视化

    前些日子公司引进了帆软商业智能FineBI,在接受了简单的培训后,发现这款商业智能软件用作可视分析只用一个词形容的话,那就是“轻盈灵动”!界面简洁.操作流畅,几个步骤就可以创建分析,获得想要的效果.此 ...

  5. 数据可视化案例 | 如何打造数据中心APP产品

    意识到数据探索带来的无尽信息,越来越多的企业开始建立自有的数据分析平台,打造数据化产品,实现数据可视化. 在零售商超行业,沃尔玛"啤酒与尿布"的故事已不再是传奇.无论是大数据还是小 ...

  6. 数据可视化 echarts3

    初识 echarts ECharts,一个纯 Javascript 的数据可视化图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefo ...

  7. 数据可视化-EChart2.0使用总结1

    图表是企业级Web开发必不可少的一个功能点.也是“数据可视化的一个具体呈现”.今天看到阮一峰翻译的“数据可视化:基本图表”一文,同时梳理一下公司现在项目使用的EChart2.0类库.阮一峰的文章同时也 ...

  8. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  9. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

随机推荐

  1. MyEclipse xml 手动添加 dtd

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  2. iOS javascript js 交互

    //JS里的一个回调.比如网页上的某个按钮点一下之后.JS会调用setKey这个方法. JSContext *context1 = [self.startView valueForKeyPath:@& ...

  3. raid性能对比

    1,raid0的特性:采用剥离,数据将在几个磁盘上进行分割.数据被分成很多数据块,每一数据块会被写入不同的磁盘.从而, 每一磁盘的工作负荷都得到了降低,这有助于加速数据传输.RAID-0可让磁盘更好地 ...

  4. 使用Android Studio打Andorid apk包的流程

    启动Android studio   1.点击菜单栏Build -> Generate Signed APK...,打开如下窗口 2.这里是类似eclipse中Android的签名,假设这里没有 ...

  5. 让淘宝链接在微信中分享，GO

    老婆开了个淘宝店,小卖家的心理大家都知道,一开始的小店总是没有光顾,吸引流量成了重中之中. 所以她到处发链接,微信里发了好多条,可是没过多久有好友微她,问她发的时什么,为什么都是打不开的.结果直接傻眼 ...

  6. Intellij IDEA 配置Subversion插件

    在使用Intellij的过程中,突然发现svn不起效了,在VCS–>Checkout from Version Control中也未发现Subversion这一项.如下图: 一.原因查找 经过分 ...

  7. GitHub 优秀的 Android 开源项目（转）

    今天查找资源时看到的一篇文章,总结了很多实用资源,十分感谢原作者分享. 转自:http://blog.csdn.net/shulianghan/article/details/18046021 主要介 ...

  8. Codeforces Round #382 (Div. 2)B. Urbanization 贪心

    B. Urbanization 题目链接 http://codeforces.com/contest/735/problem/B 题面 Local authorities have heard a l ...

  9. 转：如何学习javascript

    ps:每过一段时间就会发觉自己懂的越来越少,打开编辑器的时候不知道从何入手.兴许是过于急于求成,总没有系统地去对这门语言进行学习,囫囵吞枣,只想着能够解决工作需求.是时候让自己重新出发,从零开始,一页 ...

  10. 采用ODAC,ODBC连接Oracle【转】

    采用ODAC,ODBC连接Oracle 在没有装oracle的环境中,偶尔会需要访问数据库(Word文档查看数据,开发项目运行等等),简单介绍我用过的方案. 一:ODAC 1.介绍.ODAC,全称:o ...