156 lines
4.9 KiB
HTML
156 lines
4.9 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的仪表盘插件|DEMO4_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;
|
||
|
|
}
|
||
|
|
.btn-container a{
|
||
|
|
display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 5px solid #1d7db1;font-weight: 700;color: #1d7db1;
|
||
|
|
}
|
||
|
|
.btn-container a:hover,
|
||
|
|
.btn-container a:active{
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
.container{
|
||
|
|
width: 320px;
|
||
|
|
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">linear-component</a>
|
||
|
|
<a href="issue-63.html" class="current">issue-63</a>
|
||
|
|
<a href="async.html">async</a>
|
||
|
|
<a href="scripted.html">scripted</a>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="btn-container">
|
||
|
|
<a href="#" onclick="gaugePS.value=570">570</a>
|
||
|
|
<a href="#" onclick="gaugePS.value=583">583</a>
|
||
|
|
<a href="#" onclick="gaugePS.value=830">830</a>
|
||
|
|
</div>
|
||
|
|
<div class="container">
|
||
|
|
<canvas id="gauge-ps"></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>
|
||
|
|
var gaugePS = new RadialGauge({
|
||
|
|
renderTo: 'gauge-ps',
|
||
|
|
width: 300,
|
||
|
|
height: 300,
|
||
|
|
units: 'PS',
|
||
|
|
minValue: 0,
|
||
|
|
maxValue: 1000,
|
||
|
|
majorTicks: [
|
||
|
|
'0',
|
||
|
|
'100',
|
||
|
|
'200',
|
||
|
|
'300',
|
||
|
|
'400',
|
||
|
|
'500',
|
||
|
|
'600',
|
||
|
|
'700',
|
||
|
|
'800',
|
||
|
|
'900',
|
||
|
|
'1000'
|
||
|
|
],
|
||
|
|
minorTicks: 2,
|
||
|
|
ticksAngle: 270,
|
||
|
|
startAngle: 45,
|
||
|
|
strokeTicks: true,
|
||
|
|
highlights : [
|
||
|
|
{ from : 457, to : 880, color : 'rgba(78, 78, 76, 0.5)' },
|
||
|
|
{ from : 880, to : 1000, color : 'rgba(225, 7, 23, 0.75)' }
|
||
|
|
],
|
||
|
|
valueInt: 1,
|
||
|
|
valueDec: 0,
|
||
|
|
colorPlate: "#fff",
|
||
|
|
colorMajorTicks: "#686868",
|
||
|
|
colorMinorTicks: "#686868",
|
||
|
|
colorTitle: "#000",
|
||
|
|
colorUnits: "#000",
|
||
|
|
colorNumbers: "#686868",
|
||
|
|
valueBox: true,
|
||
|
|
colorValueText: "#000",
|
||
|
|
colorValueBoxRect: "#fff",
|
||
|
|
colorValueBoxRectEnd: "#fff",
|
||
|
|
colorValueBoxBackground: "#fff",
|
||
|
|
colorValueBoxShadow: false,
|
||
|
|
colorValueTextShadow: false,
|
||
|
|
colorNeedleShadowUp: true,
|
||
|
|
colorNeedleShadowDown: false,
|
||
|
|
colorNeedle: "rgba(200, 50, 50, .75)",
|
||
|
|
colorNeedleEnd: "rgba(200, 50, 50, .75)",
|
||
|
|
colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
|
||
|
|
colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
|
||
|
|
borderShadowWidth: 0,
|
||
|
|
borders: true,
|
||
|
|
borderInnerWidth: 0,
|
||
|
|
borderMiddleWidth: 0,
|
||
|
|
borderOuterWidth: 5,
|
||
|
|
colorBorderOuter: "#fafafa",
|
||
|
|
colorBorderOuterEnd: "#cdcdcd",
|
||
|
|
needleType: "arrow",
|
||
|
|
needleWidth: 2,
|
||
|
|
needleCircleSize: 7,
|
||
|
|
needleCircleOuter: true,
|
||
|
|
needleCircleInner: false,
|
||
|
|
animationDuration: 1500,
|
||
|
|
animationRule: "dequint",
|
||
|
|
fontNumbers: "Verdana",
|
||
|
|
fontTitle: "Verdana",
|
||
|
|
fontUnits: "Verdana",
|
||
|
|
fontValue: "Led",
|
||
|
|
fontValueStyle: 'italic',
|
||
|
|
fontNumbersSize: 20,
|
||
|
|
fontNumbersStyle: 'italic',
|
||
|
|
fontNumbersWeight: 'bold',
|
||
|
|
fontTitleSize: 24,
|
||
|
|
fontUnitsSize: 22,
|
||
|
|
fontValueSize: 50,
|
||
|
|
animatedValue: true
|
||
|
|
});
|
||
|
|
gaugePS.draw();
|
||
|
|
gaugePS.value = "510";
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|