tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add plugins example to chart documentation

pull/19317/head
Sinan997 3 years ago
parent
004a847dae
commit
343180d0ee
1 changed files with 53 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      docs/en/UI/Angular/Chart-Component.md

97
docs/en/UI/Angular/Chart-Component.md
View File

@ -11,8 +11,8 @@ First of all, need to import the `ChartModule` to your feature module as follows
```ts ```ts
// your-feature.module.ts // your-feature.module.ts
import { ChartModule } from '@abp/ng.components/chart.js'; import { ChartModule } from "@abp/ng.components/chart.js";
import { ChartDemoComponent } from './chart-demo.component'; import { ChartDemoComponent } from "./chart-demo.component";
@NgModule({ @NgModule({
imports: [ imports: [
@ -30,20 +30,20 @@ Then, `abp-chart` component can be used. See an example:
```ts ```ts
// chart-demo.component.ts // chart-demo.component.ts
import { Component } from '@angular/core'; import { Component } from "@angular/core";
@Component({ @Component({
selector: 'app-chart-demo', selector: "app-chart-demo",
template: ` <abp-chart type="pie" [data]="data"></abp-chart> `, template: ` <abp-chart type="pie" [data]="data"></abp-chart> `,
}) })
export class ChartDemoComponent { export class ChartDemoComponent {
data = { data = {
labels: ['Data 1', 'Data 2', 'Data 3'], labels: ["Data 1", "Data 2", "Data 3"],
datasets: [ datasets: [
{ {
label: 'Dataset 1', label: "Dataset 1",
data: [40, 15, 45], data: [40, 15, 45],
backgroundColor: ['#ff7675', '#fdcb6e', '#0984e3'], backgroundColor: ["#ff7675", "#fdcb6e", "#0984e3"],
}, },
], ],
}; };
@ -61,10 +61,10 @@ See the result:
### Doughnut ### Doughnut
```ts ```ts
import { Component } from '@angular/core'; import { Component } from "@angular/core";
@Component({ @Component({
selector: 'app-chart-demo', selector: "app-chart-demo",
template: ` template: `
<abp-chart <abp-chart
type="doughnut" type="doughnut"
@ -72,17 +72,18 @@ import { Component } from '@angular/core';
[options]="options" [options]="options"
width="400px" width="400px"
height="400px" height="400px"
[plugins]="myPlugin"
></abp-chart> ></abp-chart>
`, `,
}) })
export class ChartDemoComponent { export class ChartDemoComponent {
data = { data = {
labels: ['Data 1', 'Data 2', 'Data 3'], labels: ["Data 1", "Data 2", "Data 3"],
datasets: [ datasets: [
{ {
label: 'Dataset 1', label: "Dataset 1",
data: [40, 15, 45], data: [40, 15, 45],
backgroundColor: ['#a0e6c3', '#f0ea4c', '#5b9dc3'], backgroundColor: ["#a0e6c3", "#f0ea4c", "#5b9dc3"],
}, },
], ],
}; };
@ -91,14 +92,22 @@ export class ChartDemoComponent {
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: 'Doughnut Chart', text: "Doughnut Chart",
fontSize: 16, fontSize: 16,
}, },
legend: { legend: {
position: 'bottom', position: "bottom",
}, },
}, },
}; };
myPlugin = [
{
afterRender: (chart, args, options) => {
console.log("chart has been rendered");
},
},
];
} }
``` ```
@ -109,10 +118,10 @@ Result:
### Bar ### Bar
```ts ```ts
import { Component } from '@angular/core'; import { Component } from "@angular/core";
@Component({ @Component({
selector: 'app-chart-demo', selector: "app-chart-demo",
template: ` template: `
<abp-chart <abp-chart
type="bar" type="bar"
@ -124,16 +133,16 @@ import { Component } from '@angular/core';
}) })
export class ChartDemoComponent { export class ChartDemoComponent {
data = { data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [ datasets: [
{ {
label: 'First dataset', label: "First dataset",
backgroundColor: '#42A5F5', backgroundColor: "#42A5F5",
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
}, },
{ {
label: 'Second dataset', label: "Second dataset",
backgroundColor: '#FFA726', backgroundColor: "#FFA726",
data: [28, 48, 40, 19, 86, 27, 90], data: [28, 48, 40, 19, 86, 27, 90],
}, },
], ],
@ -148,10 +157,10 @@ Result:
### Radar ### Radar
```ts ```ts
import { Component } from '@angular/core'; import { Component } from "@angular/core";
@Component({ @Component({
selector: 'app-chart-demo', selector: "app-chart-demo",
template: ` template: `
<abp-chart <abp-chart
type="radar" type="radar"
@ -168,30 +177,30 @@ import { Component } from '@angular/core';
export class ChartDemoComponent { export class ChartDemoComponent {
data = { data = {
labels: [ labels: [
'January', "January",
'February', "February",
'March', "March",
'April', "April",
'May', "May",
'June', "June",
'July', "July",
'August', "August",
'September', "September",
'October', "October",
'November', "November",
'December', "December",
], ],
datasets: [ datasets: [
{ {
label: 'Dataset 1', label: "Dataset 1",
backgroundColor: 'rgba(179,181,198,0.2)', backgroundColor: "rgba(179,181,198,0.2)",
borderColor: 'rgba(179,181,198,1)', borderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40, 35, 82, 51, 62, 95], data: [65, 59, 90, 81, 56, 55, 40, 35, 82, 51, 62, 95],
}, },
{ {
label: 'Dataset 2', label: "Dataset 2",
backgroundColor: 'rgba(255,99,132,0.2)', backgroundColor: "rgba(255,99,132,0.2)",
borderColor: 'rgba(255,99,132,1)', borderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 58, 96, 27, 100, 44, 85, 77, 71, 39], data: [28, 48, 40, 58, 96, 27, 100, 44, 85, 77, 71, 39],
}, },
], ],
@ -203,9 +212,9 @@ export class ChartDemoComponent {
datasets: [ datasets: [
...this.data.datasets, ...this.data.datasets,
{ {
label: 'Dataset 3', label: "Dataset 3",
backgroundColor: 'rgba(54,162,235,0.2)', backgroundColor: "rgba(54,162,235,0.2)",
borderColor: 'rgba(54, 162, 235, 1)', borderColor: "rgba(54, 162, 235, 1)",
data: [90, 95, 98, 91, 99, 96, 89, 95, 98, 93, 92, 90], data: [90, 95, 98, 91, 99, 96, 89, 95, 98, 93, 92, 90],
}, },
], ],

Write Preview
Loading…
Cancel
Save