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. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  2. 分享20个吸引眼球的高品质免费PSD网站模板

    当你设计网站的时候,你需要一个美丽的界面来吸引你的听众.在这篇文章中,我将分享一些吸引眼球的商业PSD模板,你可以从中受到启发 EaglesTroop Business Bonfire Pocket ...

  3. ZPL打印中文信息

    博客来源:http://www.cnblogs.com/Geton/p/3595312.html 相信各位在实际的项目中,需要开发打条码模块的也会有不少,很多同行肯定也一直觉得斑马打印机很不错,但是Z ...

  4. VS2015 ASP.NET5 Web项目结构浅析

    前言 本文个人同步博客地址http://aehyok.com/Blog/Detail/76.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本 ...

  5. [轉載]史上最强php生成pdf文件,html转pdf文件方法

    之前有个客户需要把一些html页面生成pdf文件,然后我就找一些用php把html页面围成pdf文件的类.方法是可谓是找了很多很多,什么html2pdf,pdflib,FPDF这些都试过了,但是都没有 ...

  6. ios app 实现热更新（无需发新版本实现app添加新功能）

    目前能够实现热更新的方法,总结起来有以下三种 1. 使用FaceBook 的开源框架 reactive native,使用js写原生的iOS应用 ios app可以在运行时从服务器拉取最新的js文件到 ...

  7. Python学习笔记（3）：数据集操作-列的统一操作

    对数据库查询,将得到一个数据集: rs=AccessDB.GetData("select * from log where f_code='600259' limit 5,5") ...

  8. redolog文件头简单探究

    先切换: SQL> select group#,status from v$log; GROUP# STATUS---------- ----------------         1 INA ...

  9. Eclipse 基于接口编程的时候，快速跳转到实现类的方法(图文)

    Eclipse 基于接口编程的时候,要跳转到实现类很麻烦,其实Eclipse已经实现该功能. 只要按照Ctrl键,把鼠标的光标放在要跳转的方法上面,第一个是跳转到接口里面,第二个方法是跳转到实现类的位 ...

  10. 比较好的文件复制工具fastcopy和校验工具

    fastcopy http://ipmsg.org/tools/fastcopy.html.en extractfile --可以选用ADLER32计算模式,更快速.