Code JavaScript tạo đồ thị/biểu đồ OHLC

Biểu đồ OHLC được tạo bằng JavaScript tương tự như biểu đồ hình nến, ngoại trừ việc dấu tích ở bên trái & phải của đường thẳng đứng hiển thị giá mở & đóng. Bạn dễ dàng tùy chỉnh, tương tác, phản hồi, thậm chí thêm hiệu ứng động, thu phóng, xoay & xuất biểu đồ OHLC này dưới dạng ảnh.

Ví dụ bên dưới minh họa một mẫu đồ thị/biểu đồ OHLC được tạo bằng JavaScript kèm mã nguồn HTML mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.

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

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	exportFileName: "Tesla-StockChart",	
	title:{
		text: "Giá cổ phiếu của Telsa - 2016"
	},
	axisX: {
		interval:1,
		intervalType: "month",
		valueFormatString: "MMM"
	},
	axisY: {
		prefix: "$",
		title: "Giá (USD)"
	},
	data: [{
		type: "ohlc",
		yValueFormatString: "$###0.00", 
		xValueFormatString: "MMM YYYY",
		dataPoints: [
			{ x: new Date(2016, 00, 01), y: [230.720001, 231.380005, 182.410004, 191.199997] },
			{ x: new Date(2016, 01, 01), y: [188.759995, 199.520004, 141.050003, 191.929993] },
			{ x: new Date(2016, 02, 01), y: [194.250000, 239.880005, 181.500000, 229.770004] },
			{ x: new Date(2016, 03, 01), y: [244.830002, 269.339996, 233.250000, 240.759995] },
			{ x: new Date(2016, 04, 01), y: [241.500000, 243.190002, 203.660004, 223.229996] },
			{ x: new Date(2016, 05, 01), y: [221.479996, 240.850006, 187.869995, 212.279999] },
			{ x: new Date(2016, 06, 01), y: [206.139999, 235.279999, 206.000000, 234.789993] },
			{ x: new Date(2016, 07, 01), y: [235.500000, 236.630005, 208.649994, 212.009995] },
			{ x: new Date(2016, 08, 01), y: [209.009995, 211.100006, 193.449997, 204.029999] },
			{ x: new Date(2016, 09, 01), y: [212.300003, 215.669998, 192.000000, 197.729996] },
			{ x: new Date(2016, 10, 01), y: [198.039993, 199.350006, 178.190002, 189.399994] },
			{ x: new Date(2016, 11, 01), y: [188.250000, 223.800003, 180.000000, 213.690002] }
		]
	}]
});
chart.render();

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

Nguồn: CanvasJs

Tùy biến biểu đồ OHLC

Bạn có thể thay đổi nhiều thuộc tính ở code trên để thay đổi đồ thị/biểu đồ OHLC như ý muốn. Ví dụ:

zoomEnabled sang true: Kích hoạt tính năng thu phóng biểu đồ, đồ thị.
color: Tùy chỉnh màu sắc.
animationEnabled: Thêm hiệu ứng động
...

Thứ Tư, 19/04/2023 14:19

5 ★ 1 👨 251

Bài trước

Kết hợp biểu đồ hình nến với biểu đồ đường

Bài sau

Code JavaScript tạo biểu đồ OHLC từ dữ liệu JSON bằng AJAX

#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!