Học CNTT JavaScript

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

Mục lục

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 👨 277
#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