Bar chart Angular example

Xin chào các bạn đang tìm hiểu ngôn ngữ lập trình Angular, sau đây tienanhvn sẽ giới thiệu cho các bạn một bài viết lập trình biểu đồ hình cột trong angular tên tiếng anh là Chart bar in angular, để thiết lập và thực hiện code được kết quả như mong muốn các bạn nên tham khảo bài viết bar chart trong angular dưới đây.

Nội Dung:

1.    Tạo project có tên tuy ý bạn đặt
2.    Thiết lập hoặc cài đặt thư viện
3.    Tạo component trong Angular.
4.    Thực hiện code trong angular
5.    Test kết quả
6.    Video kết quả.

I. Tạo project trong Angular.

Mở cmd lên và chuyển đến thư mực bạn cần lưu project, sau đó thực hiện câu lệnh dưới đây.

ng new chartBarDemo

II. Thiết lập thư viện chart trong angular.

Thực hiện chạy thư viện này trong project sử dung cmd để thực hiện hoặc nếu bạn dùng visual studio code thực hiện trong Terminal

npm i @progress/kendo-angular-charts

III. Tạo component trong Angular.

Nếu bạn làm nhiều chart thì bạn có thể thực hiện tạo nhiểu component, nhưng bạn chỉ làm một ví dụ về biểu đồ hình cột ( chart bar ) thì bạn có thể code trong app. component luôn, nhưng nếu các bạn chưa biết các tạo component thì mình sẽ trình bày luôn.

Bạn cũng mở cmd hoặc Terminal trong visual studio code để thực hiện tạo coponent trong angular như sau.

ng g c home

Trong đó : g là Generate

                  c là Component

IV. Thực hiện code.

Đầu tiện bạn mở file app.component.html

<kendo-chart>
<kendo-chart-area background="#eee" [margin]="30">
</kendo-chart-area>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="categories">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-series>
<kendo-chart-series-item [data]="seriesData">
</kendo-chart-series-item>
<kendo-chart-series-item [data]="seriesData2">
</kendo-chart-series-item>
<kendo-chart-series-item [data]="seriesData3">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>

Mở file app.component.css

p {

font-family: Lato;

}

h1 a{

text-decoration: none;

}

Mở file app.component.ts file này sử dụng để thiết lập dư liệu cho biểu đồ gồm số liệu và ngày tháng, biểu đồ mình thiết lập là một biểu đồ lương mưa ( Rainfall chart in angular).

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Bar Chart';

public seriesData: number[] = [200, 210, 300, 150];

public seriesData2: number[] = [260, 320, 210, 80];

public seriesData3: number[] = [143, 234, 321, 345];

public categories: string[] = ['2019/05/21', '2019/05/21',

'2019/05/21', '2019/05/21'];

}

Quên:  các bạn nên chú ý phải thiết lập thư viện ChartsModule trong file app.module.ts

imports: [ BrowserModule, FormsModule,

BrowserAnimationsModule,

ChartsModule ],

Các bạn cần import thư viện nhé. 

import { ChartsModule } from '@progress/kendo-angular-charts';

import 'hammerjs';

V.  Test kết quả.

VI. Video kết quả.