Today, we will share the implementation of the awesome animation dashboard from guage. js. This class library uses the html5 canvas to generate a dynamic custom dashboard. Not dependent on ...,.
Awesome javascript animation dashboard implemented using HTML5 canvas: gauge. js? 1.1.2
var opts = { lines: 12, // The number of lines to draw angle: 0.21, // The length of each line lineWidth: 0.44, // The line thickness pointer: { length: 0.9, // The radius of the inner circle strokeWidth: 0.108 // The rotation offset }, colorStart: '#909090', // Colors colorStop: '#8FC0DA', // just experiment with them strokeColor: '#E0E0E0' // to see which ones work best for you};var target = document.getElementById('foo'); // your canvas elementvar gauge = new Gauge(target).setOptions(opts); // create sexy gauge!gauge.maxValue = 3000; // set max gauge valuegauge.animationSpeed = 46; // set animation speed (32 is default value)gauge.set(650); // set actual value
If you use jQuery, you can use the following plug-in code:
$.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;};
If you want to quickly create a dynamic meter, gauge. js is definitely a good choice.
The above is the awesome javascript animation dashboard: gauge. js implemented using the HTML5 canvas? For more information about 1.1.2, see PHP Chinese website (www.php1.cn )!