Canvas Gauges

Canvas Gauges 介绍

Canvas Gauges 是一个利用纯 JavaScript 和 html5 Canvas（画布）打造的可完全自定义的仪表，你可以用它来创建诸如机动车速度表、温度计等类型的测量设备。由于它的代码量很小，并且没有依赖，同时适用于物联网设备。

Canvas Gauges

用法

<!doctype html>

<html>

<head>

<title>Gauges as Components</title>

</head>

<body>

<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>

<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工具库

官方网站：https://canvas-gauges.com/

Canvas Gauges

Canvas Gauges 介绍

用法

Canvas Gauges

相关推荐