超棒的仪表盘javascript类库 - justGage
还记得前端时间我们分享的动画仪表板javascript - gauge.js吧，使用它能够帮助我们迅速的构建一个超棒的动画仪表盘效果。
今天这里我们再介绍一款兼容性更好的动画仪表盘javascript类库：JustGage，这个类库基于著名的绘图类库 Raphaël ，能够提供更好的绘图兼容性。
支持浏览器
几乎支持所有的浏览器，包括：
- IE6+
- Chrome
- Firefox
- Safari
- Opera
- Android
- 其它
如何使用
使用非常简单，首先导入Raphaël和JustGage的类库，如下：
<script src="js/raphael.2.1.0.min.js"></script> <script src="js/justgage.1.0.1.min.js"></script>
调用js生成一个新的仪表盘：
var g1 = new JustGage({ id: "g1", value: getRandomInt(0, 30), min: 0, max: 100, title: "Speedometer", label: "km/h", levelColors: [ "#222222", "#555555", "#CCCCCC" ] });
这里调用了一些常用的参数，你可以设置相关仪表盘属性。
完整代码如下：
<!doctype html>
<html>
<head>
<title>JustGage Demo By GBin1.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
text-align: center;
font-family: Arial;
}
#g1 {
width:400px; height:320px;
display: inline-block;
margin: 1em;
border: 1px soild #202020;
box-shadow: 0px 0px 15px #101010;
margin-top: 120px;
border-radius: 8px;
}
p {
display: block;
width: 400px;
margin: 2em auto;
text-align: center;
border-top: 1px soild #CCC;
border-bottom: 1px soild #CCC;
background: #333333;
padding:10px 0px;
color: #CCC;
text-shadow: 1px 1px 25px #000000;
border-radius: 0px 0px 5px 5px;
box-shadow: 0px 0px 10px #202020;
}
</style>
<script src="js/raphael.2.1.0.min.js"></script>
<script src="js/justgage.1.0.1.min.js"></script>
<script>
var g1;
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 30),
min: 0,
max: 100,
title: "Speedometer",
label: "km/h",
levelColors: [
"#222222",
"#555555",
"#CCCCCC"
]
});
setInterval(function() {
g1.refresh(getRandomInt(80, 100));
}, 800);
};
</script>
</head>
<body>
<div id="g1"></div>
<p> super cool speedometer demo by gbin1.com</p>
</body>
</html>
使用是不是非常简单，希望大家喜欢这个类库，如果你有任何问题和建议，请到gbin1.com留言，谢谢！
欢迎访问GBin1.com
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架