Code Angular tạo biểu đồ đường với trục ngày-thời gian

Nếu đang lập trình bằng Angular, hãy thử tạo một mẫu biểu đồ đường với trục ngày tháng & thời gian. Cách thực hiện rất đơn giản. Dưới đây là một mẫu biểu đồ được tạo bằng Angular dành cho bạn.

Mẫu biểu đồ đường được tạo bằng Angular

Mẫu biểu đồ này có thể thu phóng và tùy biến định dạng các nhãn trục.

Thành phần code

/* app.component.ts */
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
	chart: any;
	
	chartOptions = {
		theme: "light2",
		animationEnabled: true,
		zoomEnabled: true,
		title: {
			text: "Market Capitalization of ACME Corp"
		},
		axisY: {
			labelFormatter: (e: any) => {
				var suffixes = ["", "K", "M", "B", "T"];
 
				var order = Math.max(Math.floor(Math.log(e.value) / Math.log(1000)), 0);
				if(order > suffixes.length - 1)
					order = suffixes.length - 1;
 
				var suffix = suffixes[order];
				return "$" + (e.value / Math.pow(1000, order)) + suffix;
			}
		},
		data: [{
			type: "line",
			xValueFormatString: "YYYY",
			yValueFormatString: "$#,###.##",
			dataPoints: [
			  { x: new Date(1980, 0, 1), y: 2500582120 },
			  { x: new Date(1981, 0, 1), y: 2318922620 },
			  { x: new Date(1982, 0, 1), y: 2682595570 },
			  { x: new Date(1983, 0, 1), y: 3319952630 },
			  { x: new Date(1984, 0, 1), y: 3220180980 },
			  { x: new Date(1985, 0, 1), y: 4627024630 },
			  { x: new Date(1986, 0, 1), y: 6317198860 },
			  { x: new Date(1987, 0, 1), y: 7653429640 },
			  { x: new Date(1988, 0, 1), y: 9314027340 },
			  { x: new Date(1989, 0, 1), y: 11377814830 },
			  { x: new Date(1990, 0, 1), y: 9379751620 },
			  { x: new Date(1991, 0, 1), y: 11185055410 },
			  { x: new Date(1992, 0, 1), y: 10705343270 },
			  { x: new Date(1993, 0, 1), y: 13764161445.9 },
			  { x: new Date(1994, 0, 1), y: 14470193647.6 },
			  { x: new Date(1995, 0, 1), y: 17087721440.6 },
			  { x: new Date(1996, 0, 1), y: 19594314507.7 },
			  { x: new Date(1997, 0, 1), y: 21708247148.4 },
			  { x: new Date(1998, 0, 1), y: 25445271790 },
			  { x: new Date(1999, 0, 1), y: 33492125981.9 },
			  { x: new Date(2000, 0, 1), y: 30963463195.2 },
			  { x: new Date(2001, 0, 1), y: 26815924144.7 },
			  { x: new Date(2002, 0, 1), y: 22770427533.4 },
			  { x: new Date(2003, 0, 1), y: 31253989239.5 },
			  { x: new Date(2004, 0, 1), y: 36677497452.5 },
			  { x: new Date(2005, 0, 1), y: 40439926591.3 },
			  { x: new Date(2006, 0, 1), y: 49993998569.1 },
			  { x: new Date(2007, 0, 1), y: 60305010382.7 },
			  { x: new Date(2008, 0, 1), y: 32271465666.7 },
			  { x: new Date(2009, 0, 1), y: 43959427666.5 },
			  { x: new Date(2010, 0, 1), y: 50941861580.9 },
			  { x: new Date(2011, 0, 1), y: 43956921719.4 },
			  { x: new Date(2012, 0, 1), y: 50655765599.9 },
			  { x: new Date(2013, 0, 1), y: 59629932862.7 },
			  { x: new Date(2014, 0, 1), y: 62837256171.1 },
			  { x: new Date(2015, 0, 1), y: 61894377981.9 },
			  { x: new Date(2016, 0, 1), y: 64998472607.9 },
			  { x: new Date(2017, 0, 1), y: 75233321687.8 },
			  { x: new Date(2018, 0, 1), y: 68650476424.8 }
			]
		}]
	}	
}                              

Code mô đun

/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
 
import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CanvasJSAngularChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }                        

Code HTML

/* app.component.html */
<div>
    <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>    
</div>                 

Nguồn: CanvasJS

Tinh chỉnh biểu đồ

Bạn có thể kiểm soát độ dày của đường thẳng bằng thuộc tính lineThickness. Nếu muốn ẩn các đánh dấu, đặt markerSize sang 0, kiểu đánh dấu có thể thay đổi bằng thuộc tính markerType.

Thứ Năm, 15/06/2023 13:56
51 👨 220
Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!
Số điện thoại này đã được xác thực!
Bạn có thể dùng Sđt này đăng nhập tại đây!
Lỗi gửi SMS, liên hệ Admin
0 Bình luận
Sắp xếp theo
    ❖ AngularJS