html5 指南针,HTML5 Canvas 计量器

Gauges as Components

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"

>

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,20,40,60,80,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,0,.15)" },

{ "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" },

{ "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" },

{ "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },

{ "from": 200, "to": 220, "color": "rgba(0,0,255,.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, 128, 1)"

data-color-needle-end="rgba(255, 160, 122, .9)"

data-value-box="true"

data-animation-rule="bounce"

data-animation-duration="500"

data-font-value="Led"

data-animated-value="true"

>