t-digital-gauge 说明
- 个人作品,纯 js 编写 canvas 实现
- 已经修复不可正常使用的问题
- 如果好用,点个赞哟
t-digital-gauge2对上一个版本进行了完全重写
上一代版本是临时版本,建议废弃
绘制的重原理上进行了重新实现
支持更多参数
安装
npm install t-digital-gauge2 -S
使用
import { Knob, Swtich, DigitalGauge } from 't-digital-gauge2'
let knobBOX = document.getElementById('knob')
let swtichBOX = document.getElementById('swtich')
let digitalgaigeBOX = document.getElementById('digitalgaige')
let options={} //option 是可选参数,内容为下面的配置项
let knob = new Knob(knobBOX,options)
let swtich = new Swtich(swtichBOX,options)
let digitalgaige = new DigitalGauge(digitalgaigeBOX,options)
setInterval(() => {
digitalgaige.value = Math.random() * 100
}, 2000)
SSR(服务端渲染)
由于库使用到了document进行节点创建,故在服务端渲染的情况下,如下使用 下面为nextjs,nuxt中使用类似
// import { DigitalGauge } from 't-digital-gauge2'
function getDigitalGauge() {
return process.browser ? require('t-digital-gauge2').DigitalGauge : function () { }
}
export default () => {
useEffect(() => {
const DigitalGauge = getDigitalGauge()
const div = document.getElementById('digitalgauge')
new DigitalGauge(div, { value: 50 })
}, [])
return <>
<h1>这是demo</h1>
<div id='digitalgauge' style={{ width: 200, height: 200, backgroundColor: "pink" }}></div>
</>
}
补充
三个组件均提供 resize destroy 方法,用于重新计算尺寸以及卸载组件
组件没有使用双向绑定,但是通过setter对部分属性进行拦截
比如 DigitalGauge
value errorMsg maxValue minValue time unitTitle title valueSuffix
Swtich
value errorMsg
Knob
value errorMsg
上面经过拦截的属性,修改会即时生效
dist
删除对moment dayjs的依赖
配置项(option)
knob
参数 |
说明 |
备注 |
minValue |
最小值 |
|
maxValue |
最大值 |
|
title |
标题 |
|
bgColor |
背景色 |
|
tickCellArg |
线条单位角度 |
|
value |
指示的值 |
|
onChange |
控制变化回调函数 |
|
decimals |
精度 |
|
errorMsg |
提示问题 |
|
swtich
参数 |
说明 |
备注 |
showOnOffLabels |
最小值 |
|
onChange |
控制变化回调函数 |
|
errorMsg |
提示问题 |
|
digital-gauge
参数 |
说明 |
备注 |
minValue |
最小值 |
|
maxValue |
最大值 |
|
title |
标题 |
|
time |
时间 |
|
unitTitle |
单位标题 |
不显示时间时有效 |
value |
展示的数值 |
|
valueSuffix |
数值的后缀 |
|
showMinMax |
是否展示极值 |
donut 无效 |
showTitle |
是否展示标题 |
|
showTimestamp |
是否展示时间 |
|
showUnitTitle |
是否展示单位标题 |
展示时间时强制不展示 |
gaugeType |
gauge 的类型 |
horizontalBar:水平 verticalBar:竖直 donut 圆 arc:半圆 |
gaugeWidthScale |
canvas 笔画相对大小 |
1 为宽或高的 1/3 |
titleFont |
标题样式 |
|
labelFont |
label 样式 |
|
valueFont |
value 样式 |
|
minMaxFont |
极值样式 |
|
levelColors |
梯度色值 |
|
animation |
动画 |
|
animationDuration |
动画持续时间 |
|
roundedLineCap |
canvas 笔帽 |
|
stripBasic |
基本间隔 |
2px 或 2° |
dashThickness |
条形间隔 |
|
gaugeColor |
背景色 |
|
defaultColor |
不设置 levelColors 时的默认颜色 |
|
demo