Light cross-platform Graph,Custom Configuration and animation supported

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

| Field | Type | Default | description | | ----------- | ------------ | ----------------------- | ------------------------------------------------ | | fill | String/Array | #fff | | | waveStyle | String/Array | ['#5bf6a1','#2bdb72'] | | | waveWidth | Float | 0.02 | | | waveHeight | Int | 8 | | | speed | Float | .1 | | | borderColor | String | #2bdc76 | | | borderWidth | Int | 2 | | | value | Float | 0 | | | color | String | #fff | | | fontSize | String | 25px microsoft yahei | | | textAlign | String | center | | | ext | String | % | | | format | Function | null | format: 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.