Waterbubble – jQuery水球图插件
简介
Waterbubble 是一款基于 jQuery 和 Canvas 实现的动态水球图插件，你可以使用它来显示各种进度情况。
浏览器兼容
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| IE9+ ✔ | Edge ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
使用方法
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/waterbubble.js"></script>
2、HTML
<canvas id="dowebok"></canvas>
3、JavaScript
$('#dowebok').waterbubble();
配置
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| radius | 整数 | 100 | 水球的半径 |
| lineWidth | 整数 | undefined | 水球的边框宽度 |
| data | 浮点数/整数 | 0.5 | 水球内水的多少（数据多少） |
| waterColor | 字符串 | rgba(25, 139, 201, 1) | 水球的颜色和透明度 |
| txt | 字符串 | undefined | 水球内的文本 |
| textColor | 字符串 | rgba(06, 85, 128, 0.8) | 文本的颜色和透明度 |
| font | 字符串 | 空 | 设置文本字体 |
| wave | 布尔值 | true | 是否显示波纹 |
| animation | 布尔值 | true | 是否显示动画 |
标签：jQuery插件
