feat(charts): add chart.js examples page

This commit is contained in:
Alexander Zhukov 2017-05-16 19:02:54 +03:00
parent 626da294c4
commit cf23f972d1
22 changed files with 657 additions and 264 deletions

View file

@ -0,0 +1,64 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-chart-js-bar',
styles: [
`
:host {
display: block;
}
`,
],
template: `
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"></canvas>
`,
})
export class ChartJsBarComponent {
barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true,
legend: {
labels: {
fontColor: 'white',
},
},
scales: {
xAxes: [{
gridLines: {
display: true,
color: 'rgba(148,159,177,1)',
},
ticks: {
fontColor: 'white',
},
}],
yAxes: [{
gridLines: {
display: true,
color: 'rgba(148,159,177,1)',
},
ticks: {
fontColor: 'white',
},
}],
},
};
barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
barChartType: string = 'bar';
barChartLegend: boolean = true;
barChartData: any[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
];
}