Web前端之家

时间:2020-02-03 22:18来源:澳洲幸运10平台
animate 默认: #dfe0e0 说明: 刻度线的颜色。 一提到插件,我们得需要了解它的一些配置属性,从官方得知共有10个属性,如下: 至于CSS代码就不贴出来了,我们可以看下案例最终效果:

animate

默认:#dfe0e0说明:刻度线的颜色。

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

至于CSS代码就不贴出来了,我们可以看下案例最终效果:DEMO

//canvasvarinitPieChart=function(){$('.percentage').easyPieChart({barColor:'#BF1F42',trackColor:'#1E4598',scaleColor:false,lineCap:'round',lineWidth:50,borderRadius:0,animate:1000,size:395});}${initPieChart;

jQueryEasyPieChart是一个轻量级的jQuery插件,可以结合excanvas渲染和制作漂亮的饼图及动画效果,它基于HTML5的canvas元素。正常情况下,用canvas画图是不支持IE7/8,jQueryEasyPieChart主要在兼容问题基础上进行了优化,在目前主流浏览器上呈现完美的动画效果。

我刚开始看到上面这些属性,有点懵,相信大家也深感同受吧,下面就拿上面图作为实例谈谈如何使用。

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

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

然后就可以直接使用函数来调用,如下:

好吧,只能继续研究了,后来经过一番周折,发现了一款插件可以完美实现效果且兼容性高,它就是:jQueryEasyPieChart插件。下面就我的了解,大概介绍下jQueryEasyPieChart。

trackColor

这里说明下,data-percent="50"是我随意设置的,后面是要调用开发的数据接口。

通过理论和实例相结合,相信大家应该会很清楚上面的那10条属性了。目前用这种方法来实现数据统计饼图特效,我觉得是最好的一种。兼容性高,且实用简便。如果您有好的方法也可以留言给我。

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

默认:#f2f2f2说明:轨道颜色。

应用

每次写篇文章,都要花几个小时,虽然比较累,如果有着不错的点击率和大家的回复,累点也值了, 。

onStart

每次提到统计图,首先会考虑现在最流行的两种插件:Highchart和ECharts,于是我用了ECharts,轻松实现了效果,正得瑟的时候,测试人员传来“噩耗”,说不兼容IE7/8,此区域是空白,这就蛋疼了,。看下图:

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

size

onStop

默认:$.noop说明:动画开始回调函数。

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

lineCap

默认:3说明:中间轨道宽度。

HTML代码比较简单:

onStep

总结

默认:#ef1e25

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

前段时间做了一个“英国会不会脱欧”的活动页面,设计师设计了一个饼图的数据统计效果,要求实现完整效果,并且要兼容IE7+和其他主流浏览器。

scaleColor

lineWidth

barColor

看完之后,是不是掌握了呢,赶紧行动起来,自己试试吧。

编辑:澳洲幸运10平台 本文来源:Web前端之家

关键词: