html5 canvas+js动态仪表盘插件

gauge.js仪表盘的特点

• 纯html5 canvas，没有使用图片和外部css。
• 不依赖以jQuery，但是该仪表盘依然可以以jQuery插件的形式存在。
• 该仪表盘可以随意定制。
• 可以动态改变仪表盘的数据。
• 兼容性好，可以在所有主流浏览器上运行。

使用方法

var opts = {
  lines: 12, // The number of lines to draw
  angle: 0.35, // The length of each line
  lineWidth: 0.1, // The line thickness
  pointer: {
    length: 0.7, // The radius of the inner circle
    strokeWidth: 0.04, // The rotation offset
    color: '#000000' // Fill color
  },
  limitMax: 'false',   // If true, the pointer will not go past the end of the gauge

  colorStart: '#6F6EA0',   // Colors
  colorStop: '#C0C0DB',    // just experiment with them
  strokeColor: '#EEEEEE',   // to see which ones work best for you
  generateGradient: true
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Donut(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.animationSpeed = 25; // set animation speed (32 is default value)
gauge.set(1600); // set actual value
                

Gauge类处理canvas的作图和使图像运动起来。

jQuery 插件

Gauge.js不依赖于jQuery，但如果你想用jQuery来运行它，你可以按下面的方法做：

$.fn.gauge = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.gauge) {
      data.gauge.stop();
      delete data.gauge;
    }
    if (opts !== false) {
      data.gauge = new Gauge(this).setOptions(opts);
    }
  });
  return this;
};