Giter Club home page Giter Club logo

perccircle's Introduction

##PercCircle

PercCircle is a javascript plugin to create a circle showing percentage of data.

##Usage html:

<div id="chart"></div>

javascript:

<script src="PercCircle.js"></script>
<script>
    var percentCircle = new PercCircle('#chart', {
		data: [{
			name: 'Used',
			value: 30,
			color: '#ccc'
		}, {
			name: 'Rest',
			value: 70,
			color: '#f00'
		}]
    });
    percentCircle.init();
</script>

##Params

PercCircle( el, opts )
  1. el the element you want to put the percent-circle chart in.

    there are two forms you can use ('string' or 'object'):

// form 1
var percentCircle = new PercCircle('#chart', options);

// form 2
var chart = document.getElementById('chart');
var percentCircle = new PercCircle(chart, options);
  1. opts options to costomize the plugin and the percent circle.

##Options

Option Value Desciption
circleScale Interger Size of circle to the canvas. default: 0.7
lineWidth Interger (px) Line width of circle. default: 14
hoverEffect Boolean Effects when cursor pass the circle part. default: true
hoverLineWidth Interger (px) Line width when cursor pass the circle part. (need 'hoverEffect' to be true) default: lineWidth + 4
pointer Boolean Turn to pointer cursor when it pass the circle part. (need 'hoverEffect' to be true) default: true
showName Boolean Show data name when cursor pass the circle part. (need 'hoverEffect' to be true) default: true
showValue Boolean Show data value when cursor pass the circle part. (need 'hoverEffect' to be true) default: false
showPercent Boolean Show data percentage when cursor pass the circle part. (need 'hoverEffect' to be true) default: true
fontFamily String Font family of data name, value and percentage. (need 'hoverEffect' and at least one of 'showName', 'showValue', 'showPercent' to be true) default: 'Microsoft Yahei'
fontSize Interger (px) Font size of data name, value and percentage. (need 'hoverEffect' and at least one of 'showName', 'showValue', 'showPercent' to be true) default: 14
bold Boolean Whether font weight need to be bold. (need 'hoverEffect' and at least one of 'showName', 'showValue', 'showPercent' to be true) default: true
animate Boolean Animation when initializing the plugin. default: true
animateTime Interger (ms) Lasting time of animation. (need 'animate' to be true) default: 500
data Array Data on which percent circle is based. If there is no data input, it will throw 'No data...' error. default: []

##Public Methods

  1. init initialize the plugin.

##License This plugin is licensed under MIT.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.