wat

waterball

🎁A graph component with HTML5 canvas

Showing:

Popularity

Downloads/wk

3

GitHub Stars

19

Maintenance

Last Commit

3yrs ago

Contributors

3

Package

Dependencies

0

Size (min+gzip)

1.8KB

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Light cross-platform Graph,Custom Configuration and animation supported

NPM

Demo

https://zedwang.github.io/waterball/demo/index.html

  • The component supported AMD、CMD and standalone model

Install with standalone

<script src='/path/water-ball.min.js'></script>
<div id='container'></div>
var options = {
    value: 30,
    r: 100,
    color: '#787878'
}

var container  = document.getElementById('container')

var wb = new WaterBall(container, options);

// update

wb.setOptions({value:50})

Install with NPM

$ npm install waterball

This will install waterBall NPM packages.

Methods

setOptions(key,value)/setOptions(Object)

  • value 0~100

destroy()

  • destroy instance

Options

FieldTypeDefaultdescription
fillString/Array#fff
waveStyleString/Array['#5bf6a1','#2bdb72']
waveWidthFloat0.02
waveHeightInt8
speedFloat.1
borderColorString#2bdc76
borderWidthInt2
valueFloat0
colorString#fff
fontSizeString25px microsoft yahei
textAlignStringcenter
extString%
formatFunctionnullformat: function(value) { return value + 'kg'}

Support

FAQ

https://github.com/zedwang/waterball/issues

Supported browsers

Directives from this repository are automatically tested with the following browsers:

  • Chrome (stable and canary channel)

  • Firefox

  • IE 9 and 10

  • Opera

  • Safari

Modern mobile browsers should work without problems.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100