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

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

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

属性 默认 描述

barColor #ef1e25

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>
<linktype="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开发笔记

本文链接地址: jQuery easy pie chart 插件使用（基于HTML5）