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ộ.
<!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
sangtrue
: 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- ...
253
Bạn nên đọc
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo biểu đồ kim tự tháp với các vùng tỷ lệ thuận với giá trị
-
Kết hợp biểu đồ hình nến với biểu đồ đường
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo biểu đồ dạng nến đa chuỗi dữ liệu
-
Tổng hợp bài tập JavaScript có code mẫu
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ/đồ thị hình nến
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!
0 Bình luận
Sắp xếp theo

Xóa Đăng nhập để Gửi

Cũ vẫn chất
-
Cách tính BHXH 1 lần, hưởng BHXH 1 lần mới nhất
Hôm qua -
Hàm trong Python là gì? Các hàm trong Python
Hôm qua 2 -
Cap kỉ niệm ngày cưới, stt kỷ niệm ngày cưới ý nghĩa và ngọt ngào
Hôm qua -
Cách thiết lập VPN trên iPhone hoặc iPad
Hôm qua 3 -
Game luyện chuột, game nhanh tay lẹ mắt trên máy tính
Hôm qua 3 -
Firmware là gì? Firmware khác Software như thế nào?
Hôm qua -
Code Roblox mới nhất tháng 10 và cách nhập Roblox Promo Code 2025
Hôm qua 6 -
Mảng trong Python
Hôm qua -
Hướng dẫn đóng dấu ngoặc số âm trong Excel
Hôm qua 1 -
Những câu nói hay về công việc, stt hay về công việc truyền cảm hứng giúp bạn đạt được thành công
Hôm qua