<!DOCTYPE html>
<html>
<head>
<base href="." />
<script data-require="chart.js@2.6.0" data-semver="2.6.0" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### Angular Starter Plunker - Typescript
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, VERSION} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CanvasComponent } from './canvas.component';
@Component({
selector: 'my-app',
templateUrl: './src/app.html',
})
export class App {
name:string;
canvasText1: any = {top: 'Top 1', middle: 'Middle 1', bottom: 'Bottom 1'};
canvasText2: any = {top: 'Top 2', middle: 'Middle 2', bottom: 'Bottom 2'};
canvasText3: any = {top: 'Top 3', middle: 'Middle 3', bottom: 'Bottom 3'};
constructor() {
this.name = `Angular! v${VERSION.full}`
}
triggerChangeForCanvas1(event) {
this.canvasText1 = {top: this.canvasText1.top, middle: this.canvasText1.middle, bottom: this.canvasText1.bottom};
}
triggerChangeForCanvas2(event) {
this.canvasText2 = {top: this.canvasText2.top, middle: this.canvasText2.middle, bottom: this.canvasText2.bottom};
}
triggerChangeForCanvas3(event) {
this.canvasText3 = {top: this.canvasText3.top, middle: this.canvasText3.middle, bottom: this.canvasText3.bottom};
}
}
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App, CanvasComponent ],
bootstrap: [ App ]
})
export class AppModule {}
//our root app component
import {Component, ElementRef, Input, AfterViewInit, OnChanges, OnInit, ViewChild} from '@angular/core';
declare var Chart: any;
@Component({
selector: 'my-canvas',
template: `
<div class="canvas-holder">
<canvas #myCanvas></canvas>
</div>
`,
styles: [`
div.canvas-holder: {
width: 100%;
height: 100%;
}
`]
})
export class CanvasComponent implements OnChanges, OnInit, AfterViewInit {
@ViewChild('myCanvas') myCanvas: ElementRef;
@Input() canvasText: any;
@Input() canvasData: number[];
@Input() colors: string[];
ngOnChanges(): void {
this.chartUpdate();
}
ngOnInit(): void {
Chart.pluginService.register({
beforeDraw: (chart) => {
if (chart.config.options.elements.textContainers.top) {
this.drawTextOnCanvas(chart, chart.config.options.elements.textContainers.top, 'top');
}
if (chart.config.options.elements.textContainers.middle) {
this.drawTextOnCanvas(chart, chart.config.options.elements.textContainers.middle, 'middle');
}
if (chart.config.options.elements.textContainers.bottom) {
this.drawTextOnCanvas(chart, chart.config.options.elements.textContainers.bottom, 'bottom');
}
}
});
}
ngAfterViewInit(): void {
this.chartUpdate();
}
chartUpdate(): void {
let ctx = this.myCanvas.nativeElement.getContext('2d');
let chart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: this.canvasData,
backgroundColor: this.colors
}],
labels: this.colors
},
options: {
animation : false,
legend: {
display: false
},
tooltips: {
enabled: false
},
cutoutPercentage: 80,
elements: {
textContainers: {
top: {
text: this.canvasText.top,
color: '#0b4e6f',
fontStyle: 'Times New Roman',
fontSize: '14'
},
middle: {
text: this.canvasText.middle,
color: '#058784',
fontStyle: 'Verdana',
fontSize: '24'
},
bottom: {
text: this.canvasText.bottom,
color: '#FF6384',
fontStyle: 'Arial Black',
fontSize: '14'
}
}
}
}
});
}
drawTextOnCanvas(chart: any, config: any, position: string): void {
if (config) {
let xPos: number, yPos: number;
let ctx = chart.chart.ctx;
let fontStyle = config.fontStyle || 'Arial';
let fontSize = config.fontSize || 'Arial';
let txt = config.text;
let color = config.color || '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
switch(position) {
case 'top':
xPos = ((chart.chartArea.left + chart.chartArea.right) / 2);
yPos = chart.chartArea.top + 50;
break;
case 'middle':
xPos = ((chart.chartArea.left + chart.chartArea.right) / 2);
yPos = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
break;
case 'bottom':
xPos = ((chart.chartArea.left + chart.chartArea.right) / 2);
yPos = chart.chartArea.bottom - 50;
break;
}
ctx.font = fontSize +"px " + fontStyle;
ctx.fillStyle = color;
ctx.fillText(txt, xPos, yPos);
}
}
}
<h5>{{name}}</h5>
<div style="width: 600px; border: 1px solid #cecece; margin: 20px auto;">
<div style="width: 200px; float: left;">
<input type="text" (change)="triggerChangeForCanvas1($event)" [(ngModel)]="canvasText1.top"/>
<input type="text" (change)="triggerChangeForCanvas1($event)" [(ngModel)]="canvasText1.middle"/>
<input type="text" (change)="triggerChangeForCanvas1($event)" [(ngModel)]="canvasText1.bottom"/>
</div>
<div style="width: 200px; float: left;">
<input type="text" (change)="triggerChangeForCanvas2($event)" [(ngModel)]="canvasText2.top"/>
<input type="text" (change)="triggerChangeForCanvas2($event)" [(ngModel)]="canvasText2.middle"/>
<input type="text" (change)="triggerChangeForCanvas2($event)" [(ngModel)]="canvasText2.bottom"/>
</div>
<div style="width: 200px; float: left;">
<input type="text" (change)="triggerChangeForCanvas3($event)" [(ngModel)]="canvasText3.top"/>
<input type="text" (change)="triggerChangeForCanvas3($event)" [(ngModel)]="canvasText3.middle"/>
<input type="text" (change)="triggerChangeForCanvas3($event)" [(ngModel)]="canvasText3.bottom"/>
</div>
<div style="clear: both"></div>
</div>
<div style="width: 600px; border: 1px solid #cecece; margin: 20px auto;">
<div style="width: 200px; height: 200px; float: left;">
<my-canvas [canvasText]="canvasText1"
[canvasData]="[50, 20, 30]"
[colors]="['#3148ba', '#6f4ab6', '#bf81c3']"></my-canvas>
</div>
<div style="width: 200px; height: 200px; float: left;">
<my-canvas [canvasText]="canvasText2"
[canvasData]="[30, 20, 50]"
[colors]="['#d4e6fb', ' #594187', '#42b7c1']"></my-canvas>
</div>
<div style="width: 200px; height: 200px; float: left;">
<my-canvas [canvasText]="canvasText3"
[canvasData]="[10, 60, 20]"
[colors]="['#058784', '#0b4e6f', '#9a0952']"></my-canvas>
</div>
<div style="clear: both"></div>
</div>