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

最新推荐文章于 2024-08-10 07:23:09 发布

Angel19951012

最新推荐文章于 2024-08-10 07:23:09 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/Angel19951012/article/details/50464050

版权

一、使用方法
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移动端广告平台是国内唯一家整合了广告盈利和应用推广的开发者服务平台，它整合了主流的多个平台，广告资源丰富、填充率高、盈利最大化。