Học CNTT JavaScript

Code JavaScript tạo biểu đồ đường với các dấu dữ liệu hoặc đường

Mục lục

Các dấu đánh dấu dữ liệu hoặc đường thu hút sự chú ý vào điểm dữ liệu trong biểu đồ. Hầu hết các dấu đánh dấu và đường đều được tùy biến để làm nổi bật chuỗi hoặc mốc dữ liệu so với phần còn lại. Biểu đồ đường/tuyến hỗ trợ các kiểu đánh dấu dữ liệu khác nhau mà bạn có thể dùng để highlight mốc dữ liệu đặc biệt.

Biểu đồ đường trong JavaScript

Ví dụ bên dưới hiển thị mẫu biểu đồ đường với các điểm được đánh dấu. Bạn cũng sẽ có code JavaScript nguồn để chỉnh sửa hoặc lưu về máy chạy nội bộ.

<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2", // có thể thay bằng "light1", "light2", "dark1", "dark2"
	animationEnabled: true,
	title:{
		text: "Giá trị cổ phần - 2022"   
	},
	axisX: {
		interval: 1,
		intervalType: "month",
		valueFormatString: "MMM"
	},
	axisY:{
		title: "Giá (USD)",
		includeZero: true,
		valueFormatString: "$#0"
	},
	data: [{        
		type: "line",
		markerSize: 12,
		xValueFormatString: "MMM, YYYY",
		yValueFormatString: "$###.#",
		dataPoints: [        
			{ x: new Date(2016, 00, 1), y: 61, indexLabel: "gain", markerType: "triangle",  markerColor: "#6B8E23" },
			{ x: new Date(2016, 01, 1), y: 71, indexLabel: "gain", markerType: "triangle",  markerColor: "#6B8E23" },
			{ x: new Date(2016, 02, 1) , y: 55, indexLabel: "loss", markerType: "cross", markerColor: "tomato" },
			{ x: new Date(2016, 03, 1) , y: 50, indexLabel: "loss", markerType: "cross", markerColor: "tomato" },
			{ x: new Date(2016, 04, 1) , y: 65, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23" },
			{ x: new Date(2016, 05, 1) , y: 85, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23" },
			{ x: new Date(2016, 06, 1) , y: 68, indexLabel: "loss", markerType: "cross", markerColor: "tomato" },
			{ x: new Date(2016, 07, 1) , y: 28, indexLabel: "loss", markerType: "cross", markerColor: "tomato" },
			{ x: new Date(2016, 08, 1) , y: 34, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23" },
			{ x: new Date(2016, 09, 1) , y: 24, indexLabel: "loss", markerType: "cross", markerColor: "tomato" },
			{ x: new Date(2016, 10, 1) , y: 44, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23" },
			{ x: new Date(2016, 11, 1) , y: 34, indexLabel: "loss", markerType: "cross", markerColor: "tomato" }
		]
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Nguồn: CanvasJS

Tùy chỉnh biểu đồ/đồ thị

Bạn có thể dễ dàng chọn giữa các kiểu đánh dấu khác nhau bằng markerType hoặc thay đổi kích thước của nó bằng markerSize. Ngoài ra, bạn có thể chỉnh sửa:

  • markerColor - Màu sắc đánh dấu
  • markerBorderColor - Màu sắc đường viền đánh dấu
  • lineThickness - Độ dày của đường
Thứ Hai, 16/01/2023 15:41
5 ★ 1 👨 163
#JavaScript

Bạn nên đọc

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
❖
Xóa Đăng nhập để Gửi
    ❖ JavaScript

    Cũ vẫn chất

    Xem thêm
    Biểu đồ JavaScript