html5 canvas+js动态仪表盘插件

当前位置:主页 > Html5库 > html5 canvas > html5 canvas+js动态仪表盘插件
html5 canvas+js动态仪表盘插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-20
    阅读:

简要教程

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;
};
                
贵州快3

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!