温度计,气压表,油量表,指南针,里程表,等等

HTML5 Canvas 计量器绘制工具 Canvas Gauges

Canvas Gauges是一个用来在html5 canvas是绘制各种计量器、计量仪图表的JavaScript工具库。

下面的这里例子,点击仪表图表可以参考源代码,鼠标移到上面可以看到各种一般的动画效果。在手机或平板上,用手指按住它们,动画就会发生。

不需要配置的简单计量器

指南针

animated needle

animated plate

animated needle

animated plate

可灵活配置的仪表图

no-borders

half-gauge ticks horizontal

half-gauge ticks vertical (animated plate)

more custom coloring

线性计量仪器

用法

<!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,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"
></canvas>
</body>
</html>
下载地址: Canvas Gauges HTML5 Canvas 计量器绘制工具