Ng2modules-easypiechart NPM

ng2modules-easypiechart

Angular 2 wrapper for easypiechart plugin.

Get Started

installation

Install ng2modules-easypiechart using npm

$ npm i ng2modules-easypiechart

Install easy-pie-chart library using npm

$ npm i easy-pie-chart

Include easy-pie-chart library in application via html, angular-cli or webpack

<script src="node_modules/easy-pie-chart/dist/easypiechart.js"></script>

Usage

Import the module to your module:

import { EasyPieChartModule } from 'ng2modules-easypiechart';

// In your app's module
imports: [
  EasyPieChartModule
]

Use the easyPieChart directive into your component template:

<easy-pie-chart [percent]="percent" [options]="options"></easy-pie-chart>

@Component({})
export class MyComponent {
  public percent: number;
  public options: any;

  constructor() {
    this.percent = 80;
    this.options = {
      barColor: '#ef1e25',
      trackColor: '#f9f9f9',
      scaleColor: '#dfe0e0',
      scaleLength: 5,
      lineCap: 'round',
      lineWidth: 3,
      size: 110,
      rotate: 0,
      animate: {
          duration: 1000,
          enabled: true
      }
    };
  }
}

Options

Name	Default	Description
barColor	#ef1e25	The color of the curcular bar. You can either pass a valid css color string, or a function that takes the current percentage as a value and returns a valid css color string.
trackColor	#f9f9f9	The color of the track, or false to disable rendering.
scaleColor	#dfe0e0	The color of the scale lines, false to disable rendering.
scaleLength	5"	Length of the scale lines (reduces the radius of the chart).
lineCap	round	Defines how the ending of the bar line looks like. Possible values are: `butt`, `round` and `square`.
lineWidth	3	Width of the chart line in px.
size	110	Size of the pie chart in px. It will always be a square.
rotate	0	Rotation of the complete chart in degrees.
animate	object	Object with time in milliseconds and boolean for an animation of the bar growing (`{ duration: 1000, enabled: true }`), or `false` to deactivate animations.

Callbacks

Callback (params, ...)	Description
onStart (from, to)	Is called at the start of any animation.
onStep (from, to, currentValue)	Is called during animations providing the current value.
onStop (from, to)	Is called at the end of any animation.

ng2 ng2modules angular2 pie chart chart circular progress ng2modules-easypiechart angular2-easypiechart

easy-pie-chart

fcloud zckj_yxt abp-zero-template1

7 years ago

7 years ago

7 years ago

7 years ago