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. js命名规范

  2. css之入门篇

    今日学习终于到了css,css可以实现很多表现出很酷的界面,而css的出现是为了解决 HTML结构上写样式出现一片混乱现象而应运而生的语言,在以前样式都是和结构一起写的, 不分彼此,而这样大大增加了代 ...

  3. 如何设置缺省路由 route hosts(仅助记) 马连洼 马连洼 马连洼

    linux下添加路由的方法:一:使用 route 命令添加使用route 命令添加的路由,机器重启或者网卡重启后路由就失效了,方法://添加到主机的路由# route add –host 192.16 ...

  4. C++与C#的时间转换

    1.C++中的时间:(1) time_t其实是一个64位的long int类型(2) time函数:函数简介: 函数名:  time     头文件:  time.h     函数原型:time_t ...

  5. madown标签说明

    1.删除线的用法 ~~这是删除线~~

  6. 深入了解STL中set与hash_set，hash表基础

    一,set和hash_set简介 在STL中,set是以红黑树(RB-Tree)作为底层数据结构的,hash_set是以哈希表(Hash table)作为底层数据结构的.set可以在时间复杂度为O(l ...

  7. Swift编程语言SequenceType协议中的一些比较有用的接口

    在Swift编程语言中,大部分容器类(比如Array.Dictionary)都实现了SequenceType协议.SequenceType协议中有不少有趣且简便的方法可用来实现我们不少实际需求.这里将 ...

  8. mac下忘记mysql密码, 重新设置mysql密码

    step1: 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server)step2:进入终端输入:cd /usr/local/m ...

  9. 使用 DJ Java Decompiler 将整个jar包反编译成源文件

    使用 DJ Java Decompiler 将整个jar包反编译成源文件 所使用的软件是 DJ Java Decompiler 3.9. 下面是一个有用的参考文档,说明如何批量编译 http://ww ...

  10. 【转帖】Moodle平台的5个新玩法

    [玩坏Moodle平台]Moodle平台的5个新玩法 1.RSS订阅 Moodle平台可以导入外部博客(或其他提供RSS的服务),并显示在Moodle内置的博客系统中.无论是自己的个人网站还是他人的博 ...