Html5添加SVGcanvas和gauge.js制作的十分精美的仪表盘插件教程

一、使用方法

var opts ={

lines: 12,

angle: 0.35,

lineWidth: 0.1,

pointer: {

length: 0.7,

strokeWidth: 0.04,

color: '#000000'

  },

limitMax: 'false',    

colorStart: '#6F6EA0',   

colorStop: '#C0C0DB',    

strokeColor: '#EEEEEE',   

generateGradient: true

};

var target = document.getElementById('foo');

var gauge = new Donut(target).setOptions(opts);

gauge.maxValue = 3000;

gauge.animationSpeed = 25;

gauge.set(1600);

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

二、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;

};

KeyMob移动端广告平台是国内唯一家整合了广告盈利和应用推广的开发者服务平台，它整合了主流的多个平台，广告资源丰富、填充率高、盈利最大化。