数据可视化(2)--Justgage

时间：2022-09-06 23:59:09

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>

效果如下

数据可视化(2)--Justgage

可配置参数如下

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)

相关文章