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-mi nor -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-mi nor -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-mi nor -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/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。