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