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

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