EASY PIE CHART是一个轻量级的jQuery插件，主要用来渲染和制作漂亮的饼图及动画效果，基于与HTML5的canvas元素。

配置参数

您可以通过一组这些选项的初始化函数来设置一个自定义的行为，并寻找插件。

这个插件支持支持canvas元素所有主流浏览器。随着excanvas你甚至可以呈现在IE 7 +8的图表。

属性 默认 描述
barColor #ef1e25 该curcular栏的颜色。你可以通过像RGB，RGBA十六进制或字符串颜色任一有效的CSS颜色字符串。但你也可以通过接受目前的百分比值来返回一个动态生成的颜色的功能。
trackColor #f2f2f2 赛道的栏的颜色，假以禁用渲染。
scaleColor #dfe0e0 刻度线的颜色，假以禁用渲染。
lineCap round 定义了如何在棒材生产线的结局看起来像。可能的值有：对接，圆形和方形。
lineWidth 3 宽度像素的棒材生产线的。
size 110 大小像素饼图。这将永远是一个正方形。
animate false 时间以毫秒为单位的酒吧越来越多的缓解动画，或虚假停用。
onStart $.noop 那个叫于任何动画（仅当动画是不是假的）开始回调函数。
onStop $.noop 这就是所谓在任何动画的结尾（仅当动画是不是假的）的回调函数。
onStep $.noop 这是在动画提供的当前值调用的回调函数（上下文是插件，这样你就可以通过访问DOM元素这一点。$ EL）。

 

使用：

先载入所需要的文件

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script>
<link rel="stylesheet"type="text/css" href="/path/to/jquery.easy-pie-chart.css">

 

HTML部分

<div data-percent="73">73%</div>

调用：

<script type="text/javascript"> $(function() {????

//create instance????

$('.chart').easyPieChart({????????

animate: 2000????

});????

//update instance after 5 sec????

setTimeout(function() {????????

$('.chart').data('easyPieChart').update(40);????

}, 5000); });

</script>

自由转载，转载请注明： 转载自WEB开发笔记 www.chhua.com

本文链接地址: jQuery easy pie chart 插件使用（基于HTML5） http://www.chhua.com/web-note4816

相关笔记

更多