纯javascript简单实用的仪表盘插件

当前位置:主页 > jQuery库 > 布局和界面 > 纯javascript简单实用的仪表盘插件
纯javascript简单实用的仪表盘插件
分享:

    插件介绍

    justgage是一款简单实用的纯javascript仪表盘插件。该仪表盘插件基于Raphaël库来绘制矢量图形。理论上可以工作在任何支持SVG的浏览器中,但实际上它可以在IE6以上的浏览器中正常工作。

    浏览器兼容性

    浏览器兼容性
    时间:2015-08-24
    阅读:
简要教程

justgage是一款简单实用的纯javascript仪表盘插件。该仪表盘插件基于Raphaël库来绘制矢量图形。理论上可以工作在任何支持SVG的浏览器中,但实际上它可以在IE6以上的浏览器中正常工作。

该仪表盘插件已经在 Chrome 20, Firefox 12, IE6, 7, 8, 9, Opera 12, Safari 5.1.2, Android 4.0等浏览器中进行过测试。对于低版本的Safari和IE浏览器,由于它们不支持SVG filters,在效果上会有一些折扣。

使用方法

使用该仪表盘插件需要引入raphael.2.1.0.min.js和justgage-1.0.1.js文件。

<script src="raphael.2.1.0.min.js"></script>
<script src="justgage.1.0.1.js"></script>                
              
HTML结构

使用一个空的<div>做为仪表盘的容器即可。需要给这个容器设置一个ID号,以及设置它的宽度和高度。

<div id="gauge" class="200x160px"></div>               
              
初始化插件

可以通过下面的方法来初始化该仪表盘插件。

<script>
  var g = new JustGage({
    id: "gauge",
    value: 67,
    min: 0,
    max: 100,
    title: "Visitors"
  });
</script>                
              

配置参数

下面是该仪表盘插件的一些可用配置参数。

  • id:类型:String。仪表盘容器的ID。
  • title:类型:String。仪表盘标题的文本。
  • titleFontColor:类型:String。文本的颜色。
  • value :类型:int。仪表盘显示的数值。
  • valueFontColor:类型:String。数值的颜色。
  • min:类型:int。最小值。
  • max:类型:int。最大值。
  • showMinMax:类型:boolean。显示还是隐藏最大和最小值。
  • gaugeWidthScale:类型:float。仪表盘的宽度。
  • gaugeColor:类型:String。仪表盘的背景颜色。
  • label:类型:String。在数值下面显示的文本。
  • showInnerShadow:类型:boolean。是否显示内阴影。
  • shadowOpacity:类型:float。阴影的透明度,值0-1之间。
  • shadowSize:类型:int。内阴影的尺寸。
  • shadowVerticalOffset:类型:int。阴影距离上部的偏移。
  • levelColors:类型:array of strings。指示器的颜色,低值和高值显示不同的颜色,使用hex颜色格式。
  • levelColorsGradient:类型:boolean。use gradual or sector-based color change。
  • labelFontColor:类型:String。数值下面标题的颜色。
  • startAnimationTime:类型:int。初始化加载动画的指示器数值。
  • startAnimationType:类型:String。动画的类型:linear, >, <, <>, bounce
  • refreshAnimationTime:类型:int。刷新后指示器的数值。
  • refreshAnimationType:类型:String。刷新后的动画类型:linear, >, <, <>, bounce