浙江 杭州

html5 canvas+js动态仪表盘插件

系统分类: 网页特效 - jquery插件 - jQuery界面效果 2015-08-10

人气51480

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款使用html5 canvas和gauge.js制作的十分精美的仪表盘插件。仪表盘的特点是没有使用图片、css,只使用canvas制作。虽然仪表盘不依赖于jQuery,但它也同样支持jQuery。

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;
};
                

查看演示
下载资源:40
下载资源
错误提交:

格式:zip 大小:155.36KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1181.html 非特殊说明,本文版权归原作者所有,转载请注明出处
html5 canvas+js动态仪表盘插件

我当前G币余额:0 已下载次数:40

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有6 评论)