easy-pie-chart

easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values

  • 所有者: rendro/easy-pie-chart
  • 平台:
  • 許可證: MIT License
  • 分類:
  • 主題:
  • 喜歡:
    0
      比較:

Github星跟蹤圖

easy-pie-chart

Lightweight plugin to render simple, animated and retina optimized pie charts

Version
Build Status
Dependencies Status
Analytics

Features

  • highly customizable
  • very easy to implement
  • resolution independent (retina optimized)
  • uses requestAnimationFrame for smooth animations on modern devices and
  • works in all modern browsers, even in IE7+ with excanvas

framework support

  • Vanilla JS (no dependencies) (~872 bytes)
  • jQuery plugin (~921 bytes)
  • Angular Module (~983 bytes)

Get started

Installation

You can also use bower to install the component:

$ bower install jquery.easy-pie-chart

jQuery

To use the easy pie chart plugin you need to load the current version of jQuery (> 1.6.4) and the source of the plugin.

<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>

Vanilla JS

If you don't want to use jQuery, implement the Vanilla JS version without any dependencies.

<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>

Options

You can pass these options to the initialize function to set a custom look and feel for the plugin.

Callbacks

All callbacks will only be called if animate is not false.

Plugin api

jQuery

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

Vanilla JS

// instantiate the plugin
var chart = new EasyPieChart(element, options);
// update
chart.update(40);
// disable animation
chart.disableAnimation();
// enable animation
chart.enableAnimation();
Using a gradient
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

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

RequireJS

When using RequireJS you can define your own name. Examples can be found in the demo/requirejs.html.

Browser Support

Native support

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

Support for Internet Explorer 7 and 8 with excanvas polyfill.

Test

To run the test just use the karma adapter of grunt: grunt test

Credits

Thanks to Rafal Bromirski for designing this dribble shot which inspired me building this plugin.

Copyright (c) 2015 Robert Fleischmann, contributors. Released under the MIT, GPL licenses

概覽

名稱與所有者rendro/easy-pie-chart
主編程語言JavaScript
編程語言JavaScript (語言數: 4)
平台
許可證MIT License
發布數20
最新版本名稱2.1.6 (發布於 )
第一版名稱1.0.0 (發布於 )
創建於2012-07-04 23:02:25
推送於2019-10-07 13:23:53
最后一次提交2015-07-15 20:49:22
星數2.1k
關注者數105
派生數503
提交數177
已啟用問題?
問題數165
打開的問題數77
拉請求數22
打開的拉請求數16
關閉的拉請求數10
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?
去到頂部