Canvas Gauges 介绍
Canvas Gauges 是一个利用纯 JavaScript 和 html5 Canvas（画布）打造的可完全自定义的仪表，你可以用它来创建诸如机动车速度表、温度计等类型的测量设备。由于它的代码量很小，并且没有依赖，同时适用于物联网设备。
用法
<!doctype html>
<html>
<head>
<title>Gauges as Components</title>
<script src="gauge.min.js"></script>
</head>
<body>
<!-- Injecting linear gauge -->
<canvas data-type="linear-gauge"
data-width="160"
data-height="600"
data-border-radius="20"
data-borders="0"
data-bar-stroke-width="20"
data-minor-ticks="10"
data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
data-value="22.3"
data-units="°C"
data-color-value-box-shadow="false"
></canvas>
<!-- Injecting radial gauge -->
<canvas data-type="radial-gauge"
data-width="400"
data-height="400"
data-units="Km/h"
data-title="false"
data-value="0"
data-min-value="0"
data-max-value="220"
data-major-ticks="0,100,120,140,160,180,200,220"
data-minor-ticks="2"
data-stroke-ticks="false"
data-highlights='[
{ "from": 0,"to": 50,"color": "rgba(0,255,.15)" },
{ "from": 50,"to": 100,"color": "rgba(255,
{ "from": 100,"to": 150,.25)" },
{ "from": 150,"to": 200,225,
{ "from": 200,"to": 220,.25)" }
]'
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-title="#fff"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-needle-start="rgba(240,128,1)"
data-color-needle-end="rgba(255,122,.9)"
data-value-box="true"
data-animation-rule="bounce"
data-animation-duration="500"
data-font-value="Led"
data-animated-value="true"
></canvas>
</body>
</html>
网站地址:https://canvas-gauges.com/
GitHub:https://github.com/Mikhus/canvas-gauges
网站描述:绘制各种计量器、计量仪图表的Js工具库
Canvas Gauges
官方网站：https://canvas-gauges.com/
小编说
以上是编程之家为你收集整理的Canvas Gauges全部内容。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。