233 lines
7.7 KiB
HTML
233 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>基于HTML5 canvas的仪表盘插件|DEMO3_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
|
|
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
|
|
<style type="text/css">
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: #fff
|
|
}
|
|
.btn-container{
|
|
padding: 1em 0;
|
|
text-align: center;
|
|
}
|
|
.container{
|
|
width: 700px;
|
|
margin: 50px auto;
|
|
}
|
|
</style>
|
|
<script src="js/gauge.min.js"></script>
|
|
<!--[if IE]>
|
|
<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div class="htmleaf-container">
|
|
<header class="htmleaf-header">
|
|
<h1>基于HTML5 canvas的仪表盘插件 <span>Canvas Based HTML5 Gauge Library</span></h1>
|
|
<div class="htmleaf-links">
|
|
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
|
|
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/html5/html5-canvas/201609294051.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
|
|
</div>
|
|
<div class="htmleaf-demo center">
|
|
<a href="index.html">radial</a>
|
|
<a href="radial-component.html">radial-component</a>
|
|
<a href="linear-component.html" class="current">linear-component</a>
|
|
<a href="issue-63.html">issue-63</a>
|
|
<a href="async.html">async</a>
|
|
<a href="scripted.html">scripted</a>
|
|
</div>
|
|
</header>
|
|
<div class="btn-container">
|
|
<button onclick="animateGauges()">Animate</button>
|
|
<button onclick="stopGaugesAnimation()">Stop animation</button>
|
|
</div>
|
|
<div class="container">
|
|
<canvas data-type="linear-gauge"
|
|
data-width="160"
|
|
data-height="600"
|
|
data-border-radius="20"
|
|
data-borders="true"
|
|
data-bar-stroke-width="20"
|
|
data-minor-ticks="10"
|
|
data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
|
|
data-color-numbers="red,green,blue,transparent,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
|
|
data-color-major-ticks="red,green,blue,transparent,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
|
|
data-color-bar-stroke="#444"
|
|
data-value="22.3"
|
|
data-units="°C"
|
|
data-color-value-box-shadow="false"
|
|
data-tick-side="left"
|
|
data-number-side="left"
|
|
data-needle-side="left"
|
|
data-animate-on-init="true"
|
|
data-color-plate="transparent"
|
|
></canvas>
|
|
|
|
<canvas data-type="linear-gauge"
|
|
data-width="160"
|
|
data-height="600"
|
|
data-border-radius="20"
|
|
data-borders="0"
|
|
data-bar-stroke-width="0"
|
|
data-minor-ticks="20"
|
|
data-animation-rule="cycle"
|
|
data-animation-duration="1000"
|
|
data-title="Temperature"
|
|
data-units="°C"
|
|
data-color-value-box-shadow="false"
|
|
data-animated-value="true"
|
|
></canvas>
|
|
|
|
<canvas data-type="linear-gauge"
|
|
data-width="160"
|
|
data-height="600"
|
|
data-border-radius="0"
|
|
data-borders="0"
|
|
data-bar-begin-circle="25"
|
|
data-minor-ticks="10"
|
|
data-value="36.6"
|
|
data-min-value="35"
|
|
data-max-value="42"
|
|
data-title="°C"
|
|
data-major-ticks="35,36,37,38,39,40,41,42"
|
|
data-ticks-width="18"
|
|
data-ticks-width-minor="7.5"
|
|
data-bar-width="5"
|
|
data-highlights="false"
|
|
data-color-value-box-shadow="false"
|
|
data-value-box-stroke="0"
|
|
data-color-value-box-background="false"
|
|
data-value-int="2"
|
|
data-value-dec="1"
|
|
></canvas>
|
|
|
|
<canvas data-type="linear-gauge"
|
|
data-width="160"
|
|
data-height="600"
|
|
data-border-radius="20"
|
|
data-borders="0"
|
|
data-bar-begin-circle="false"
|
|
data-title="Temperature"
|
|
data-units="°C"
|
|
data-minor-ticks="10"
|
|
data-value="99"
|
|
data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
|
|
data-tick-side="right"
|
|
data-number-side="right"
|
|
data-needle-side="right"
|
|
data-animation-rule="bounce"
|
|
data-animation-duration="750"
|
|
data-bar-stroke-width="5"
|
|
data-value-box-border-radius="0"
|
|
data-value-text-shadow="false"
|
|
></canvas>
|
|
|
|
<br>
|
|
|
|
<canvas data-type="linear-gauge"
|
|
data-width="600"
|
|
data-height="160"
|
|
data-border-radius="0"
|
|
data-borders="0"
|
|
data-bar-begin-circle="false"
|
|
data-title="Temperature"
|
|
data-units="°C"
|
|
data-value="75.5"
|
|
data-bar-stroke-width="5"
|
|
data-highlights='[{"from":50, "to":75, "color": "red"}]'
|
|
></canvas>
|
|
|
|
<br>
|
|
|
|
<canvas data-type="linear-gauge"
|
|
data-width="600"
|
|
data-height="160"
|
|
data-border-radius="20"
|
|
data-borders="0"
|
|
data-bar-stroke-width="0"
|
|
data-value="66.6"
|
|
data-tick-side="left"
|
|
data-number-side="left"
|
|
data-needle-side="left"
|
|
data-animation-rule="bounce"
|
|
data-animation-duration="750"
|
|
data-title="Temperature"
|
|
data-units="°C"
|
|
></canvas>
|
|
|
|
<canvas data-type="linear-gauge"
|
|
data-width="400"
|
|
data-height="150"
|
|
data-min-value="0"
|
|
data-max-value="220"
|
|
data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
|
|
data-minor-ticks="2"
|
|
data-stroke-ticks="true"
|
|
data-highlights='false'
|
|
data-color-plate="#fff"
|
|
data-border-shadow-width="0"
|
|
data-borders="false"
|
|
data-bar-begin-circle="false"
|
|
data-bar-width="10"
|
|
data-tick-side="left"
|
|
data-number-side="left"
|
|
data-needle-side="left"
|
|
data-needle-type="line"
|
|
data-needle-width="3"
|
|
data-color-needle="#222"
|
|
data-color-needle-end="#222"
|
|
data-animation-duration="1500"
|
|
data-animation-rule="linear"
|
|
data-animation-target="plate"
|
|
></canvas>
|
|
</div>
|
|
<div class="related">
|
|
<h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
|
|
<a href="http://www.htmleaf.com/jQuery/Chart/201504211714.html">
|
|
<img src="related/1.jpg" width="300" alt="jQuery高质量飞行仪表指示器插件"/>
|
|
<h3>jQuery高质量飞行仪表指示器插件</h3>
|
|
</a>
|
|
<a href="http://www.htmleaf.com/jQuery/Layout-Interface/201510202686.html">
|
|
<img src="related/2.jpg" width="300" alt="精美时尚的jQuery动态仪表盘插件"/>
|
|
<h3>精美时尚的jQuery动态仪表盘插件</h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
if (!Array.prototype.forEach) {
|
|
Array.prototype.forEach = function(cb) {
|
|
var i = 0, s = this.length;
|
|
for (; i < s; i++) {
|
|
cb && cb(this[i], i, this);
|
|
}
|
|
}
|
|
}
|
|
|
|
var timers = [];
|
|
|
|
function animateGauges() {
|
|
document.gauges.forEach(function(gauge) {
|
|
timers.push(setInterval(function() {
|
|
gauge.value = Math.random() *
|
|
(gauge.options.maxValue - gauge.options.minValue) +
|
|
gauge.options.minValue;
|
|
}, gauge.animation.duration + 500));
|
|
});
|
|
}
|
|
|
|
function stopGaugesAnimation() {
|
|
timers.forEach(function(timer) {
|
|
clearInterval(timer);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |