如何基于HTML5实现数据统计饼图动画特效

html-css08

如何基于HTML5实现数据统计饼图动画特效,第1张

一提到插件,我们得需要了解它的一些配置属性,从官方得知共有10个属性,如下:

barColor

默认:#ef1e25

说明:指的是该curcular栏的颜色。你可以通过像RGB,RGBA十六进制或字符串颜色任一有效的CSS颜色字符串。 但你也可以通过接受目前的百分比值来返回一个动态生成的颜色的功能。

trackColor

默认:#f2f2f2

说明:轨道颜色。

scaleColor

默认:#dfe0e0

说明:刻度线的颜色。

lineCap

默认:round

说明:定义栏线的终点的形状。可能的值有: 对接,圆形和方形 。

lineWidth

默认:3

说明:中间轨道宽度。

size

默认:110

说明:饼图大小。规定为一个正方形。

animate

默认:false

说明:设置动画缓冲时间。

onStart

默认:$.noop

说明:动画开始回调函数。

onStop

默认:$.noop说明:动画结束回调函数。

onStep

默认:$.noop说明:动画过程中回调函数。

html5的画布,用JS操作算出统计数据百分比然后生成图像,这个和css没什么关系。

百度:html5 Canvas

这种东西你自己开发麻烦,就用你图中这种开发好的现成js库,看看参数说明调用就能生成..