Skip to content

Latest commit

 

History

History
58 lines (54 loc) · 2.61 KB

README.md

File metadata and controls

58 lines (54 loc) · 2.61 KB
Raw

Canvas Gauge v0.1

基于canvas的仪表盘和动画。 根据 http://www.fabledweb.com/html5-canvas-gauge.html. 的代码进行了适当修改，在此基础上增加了仪表盘刻度示数和中间总示数

配置

名称 类型 默认值 作用
tick_length Int 80 短刻度长度
large_tick_length Int 110 长刻度长度
tick_thickness Int 6 刻度条宽度
tick_group_length Int 9 每组内的短刻度个数
ticks_groups_begin Int 0 起始点
total_degrees Int 240 刻度的总角度
tick_color String '#555962' 未达到的刻度颜色
tick_on_color String '#527d98' 已达到的刻度颜色
bg_image String null 刻度盘的背景图片
gauge_scale Int 1 缩放比例
animation_duration Int 550 达到目标值的动画时间
total_tick Int 101 刻度总个数
show_num Boolean true 是否展示长刻度下的数字
show_center_num Boolean true 是否显示中间大的数字
center_font_size Int 200 中间数字font-size
center_num_font_family String '' 中间数字font-family
center_offset Int 0 中间数字上下位置的便宜
num_gap Int 1 每个刻度之间的间隔值，计算显示数字时需要
num_begin Int 0 起始刻度值
num_font_size Int 24 刻度值字体大小
num_offset Int 10 刻度值距离刻度的间隔, 单位px
num_font_family String 'HanHei SC,PingFang SC,Helvetica Neue Thin, Helvetica, STHeitiSC-Light, Arial, sans-serif' 刻度数字font-family
triangle_height Int 24 刻度指示三角形的 高度+triangle_offset
triangle_width Int 16 刻度指示三角形的底部宽度
triangle_offset Int 8 刻度指示三角形距离刻度的空隙

使用方法

var my_canvas_obj= document.getElementById("my-canvas");
var gauge= new SOFAGauge({
        "tick_length": 20, // 短刻度长度
        "large_tick_length": 30, // 长刻度长度
        "tick_thickness": 1, //刻度条宽度
        "tick_group_length": 9, //每组内的短刻度个数
        "ticks_groups_begin": 0, //起始点
        "total_degrees": 240, // 刻度的总角度
        "total_tick": 101,  // 刻度总个数
        "tick_color": "#a6a6ad", // 未达到的刻度颜色
        "tick_on_color": "#527d98", // 已达到的刻度颜色
        "bg_image": null,
        "gauge_scale": 1, // 缩放比例
        "animation_duration": 1000, //达到目标值的动画时间
        "percent": 0, // 起始百分比
        "canvas": my_canvas_obj // canvas元素
    });
gauge.render(); //render the configured gauge
gauge.updatePercent(60); //animate the gauge to 60%

demo

仪表盘demo