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. GCD的同步异步串行并行、NSOperation和NSOperationQueue一级用dispatch_once实现单例

    转:http://www.tuicool.com/articles/NVVnMn (1)GCD实现的同步异步.串行并行. ——同步sync应用场景:用户登录,利用阻塞 ——串行异步应用场景:下载等耗时 ...

  2. linux云主机怎么安装WDCP

    linux云主机 教你成功安装WDCP的2个方法(第一个不成功就试第2个) 工具/原料   Xshell 云服务器 方法/步骤   1 先用Xshell连接你的服务器 2 输入一下代码    wget ...

  3. asp.net“服务器应用程序不可用” 解决方法

    服务器应用程序不可用 您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的“刷新”按钮重试您的请求. 管理员注意事项: 详述此特定请求失败原因的错误消息可在 We ...

  4. 测试markdown发布

  5. MySQL模拟：线上误update的恢复

    作为DBA,细心.沉稳是首要的基本素质.不过总有那么一会心烦意乱或者开发同学出现误操作之类的...这里模拟一个误update操作,然后恢复. 如果开发同学有误操作之后最好先别乱动生产环境,需要记录几个 ...

  6. Codeforces Round #384 (Div. 2) A. Vladik and flights 水题

    A. Vladik and flights 题目链接 http://codeforces.com/contest/743/problem/A 题面 Vladik is a competitive pr ...

  7. Codeforces Round #177 (Div. 1) 题解【ABCD】

    Codeforces Round #177 (Div. 1) A. Polo the Penguin and Strings 题意 让你构造一个长度为n的串,且里面恰好包含k个不同字符,让你构造的字符 ...

  8. VS2013 修改TFS的本地映射路径

    在源代码管理器里面 找到你的本地工作区 然后点击编辑按钮 修改本地目录

  9. 高吞吐量的分布式发布订阅消息系统Kafka--spring-integration-kafka的应用

    一.概述 Spring Integration Kafka 是基于 Apache Kafka 和Spring Integration来集成Kafka,对开发配置提供了方便. 二.配置 1.spring ...

  10. 领域驱动开发推荐代码示例 — Microsoft NLayerApp

    简介: Microsoft NLayerApp是由微软西班牙团队出品的基于.NET 4.0的“面向领域N层分布式架构”代码示例,在codeplex上的地址是:http://microsoftnlaye ...