easy-pie-chart

动态的，视网膜优先的饼状图插件

特性：

• 高可定制性

• 易于使用

• 独立分辨率（视网膜优化）

• 流畅的动画效果

• 基本支持现有浏览器，甚至 IE7

支持的框架：

• Vanilla JS (无需任何依赖) (~872 bytes)

• jQuery plugin (~921 bytes)

• Angular Module (~983 bytes)

1.使用方法：

安装插件

$ bower install jquery.easy-pie-chart

jquery：

<div class="chart" data-percent="73" data-scale-color="#ffb400">73%div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">script>
<script src="/path/to/jquery.easy-pie-chart.js">script>
<script>
    $(function() {
        $('.chart').easyPieChart({
            //your options goes here
        });
    });
</script>

原生Javascript

<div class="chart" data-percent="73">73%div>

<script src="/path/to/easy-pie-chart.js">script>
<script>
    var element = document.querySelector('.chart');
    new EasyPieChart(element, {
        // your options goes here
    });
</script>

AngularJS

<div ng-controller="chartCtrl">
    <div easypiechart options="options" percent="percent">div>
div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js">script>
<script src="../dist/angular.easypiechart.min.js">script>
<script>
    var app = angular.module('app', ['easypiechart']);
    app.controller('chartCtrl', ['$scope', function ($scope) {
        $scope.percent = 65;
        $scope.options = {
            animate:{
                duration:0,
                enabled:false
            },
            barColor:'#2C3E50',
            scaleColor:false,
            lineWidth:20,
            lineCap:'circle'
        };
    }]);
</script>

2.options（参数）

属性 （类型）	默认值	描述
barColor	#ef1e25	圆形区域的颜色，可以通过css设置，或者用一个使用当前百分数值作为参数的函数的返回值（必须是有效的颜色的值）。
trackColor	#f2f2f2	当前进度或者无法描绘的的颜色值, .
scaleColor	#dfe0e0	刻度线的颜色， 或者禁用渲染.
scaleLength	5	刻度线的长度 (reduces the radius of the chart).
lineCap	round	定义了如何在棒材生产线的结局看起来像 取值有: butt, round and square.
lineWidth	3	图表线宽度.
size	110	图表的大小. It will always be a square.
rotate	0	旋转的度数.
animate	object	定义对象的动画 ({ duration: 1000, enabled: true }), or false to deactivate animations.
easing	defaultEasing	jQuery easing函数，动画效果

回调函数

所有的回调函数仅仅在动画存在的情况下.

Callback(params, ...)	Description
onStart(from, to)	动画开始回调函数
onStep(from, to, currentValue)	动画过程中被调用（作用域，插件的上下文，你可以通过this.el访问DOM元素I
onStop(from, to)	动画结尾回调函数

3.插件API接口

Jquery

$(function() {
    // instantiate the plugin
    ...
    // update
    $('.chart').data('easyPieChart').update(40);
    ...
    // disable animation
    $('.chart').data('easyPieChart').disableAnimation();
    ...
    // enable animation
    $('.chart').data('easyPieChart').enableAnimation();
});

原生Javascript

// instantiate the plugin
var chart = new EasyPieChart(element, options);
// update
chart.update(40);
// disable animation
chart.disableAnimation();
// enable animation
chart.enableAnimation();

使用一个渐变

new EasyPieChart(element, {
  barColor: function(percent) {
    var ctx = this.renderer.getCtx();
    var canvas = this.renderer.getCanvas();
    var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop(0, "#ffe57e");
        gradient.addColorStop(1, "#de5900");
    return gradient;
  }
});

AngularJS

需要添加一个percent属性并且将它绑定到你的controller上面

For a value binding you need to add the percent attribute and bind it to your controller.

浏览器支持

• Chrome
• Safari
• FireFox
• Opera
• Internet Explorer 9+

Support for Internet Explorer 7 and 8 with excanvas polyfill.