Code JavaScript tạo biểu đồ/đồ thị hình nến
Candlestick Chart hay biểu đồ/đồ thị hình nến được tạo bằng JavaScript trên CanvasJS là một cột với các đường thẳng đứng đại diện cho những giá trị mở, cao thấp & kín của một điểm dữ liệu.
Biểu đồ dạng nến cung cấp hỗ trợ trực quan nhằm giúp người dùng dễ dàng đưa ra quyết định khi giao dịch chứng khoán, đổi ngoại tệ… Biểu đồ cây nến đẹp, có thể tương tác và hỗ trợ hoạt ảnh, thu phóng, xoay và ghi chú thích.
Ví dụ bên dưới minh họa một mẫu biểu đồ cây nến đượ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 dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // Bạn có thể thay bằng "light1", "light2", "dark1", "dark2"
exportEnabled: true,
title: {
text: "Giá cổ phiếu của Netflix năm 2016"
},
subtitles: [{
text: "Trung bình hàng tuần"
}],
axisX: {
interval: 1,
valueFormatString: "MMM"
},
axisY: {
prefix: "$",
title: "Giá"
},
toolTip: {
content: "Date: {x}<br /><strong>Price:</strong><br />Open: {y[0]}, Close: {y[3]}<br />High: {y[1]}, Low: {y[2]}"
},
data: [{
type: "candlestick",
yValueFormatString: "$##0.00",
dataPoints: dataPoints
}]
});
$.get("https://canvasjs.com/data/gallery/javascript/netflix-stock-price.csv", getDataPointsFromCSV);
function getDataPointsFromCSV(csv) {
var csvLines = points = [];
csvLines = csv.split(/[\r?\n|\r|\n]+/);
for (var i = 0; i < csvLines.length; i++) {
if (csvLines[i].length > 0) {
points = csvLines[i].split(",");
dataPoints.push({
x: new Date(
parseInt(points[0].split("-")[0]),
parseInt(points[0].split("-")[1]),
parseInt(points[0].split("-")[2])
),
y: [
parseFloat(points[1]),
parseFloat(points[2]),
parseFloat(points[3]),
parseFloat(points[4])
]
});
}
}
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>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
</body>
</html>
Nguồn: CanvasJS
Tùy chỉnh biểu đồ
Bạn có thể thay đổi màu sắc khác nhau cho thuộc tính risingColor
hoặc Color
để biểu thị mức tăng hoặc giảm của giá cả.
Một số lựa chọn tùy biến thường được dùng khác bao gồm zoomEnabled
, animationEnabled
…
Bạn nên đọc
-
Code JavaScript tạo biểu đồ/đồ thị hình tròn
-
Code JavaScript tạo biểu đồ hình tròn với bán kính tùy chỉnh
-
Tổng hợp bài tập JavaScript có code mẫu
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code mẫu JavaScript tạo biểu đồ kim tự tháp với các nhãn chỉ mục/dữ liệu
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường


Cũ vẫn chất
-
Công thức tính diện tích xung quanh hình nón, diện tích toàn phần hình nón, thể tích hình nón, V nón
Hôm qua -
Các câu lệnh trong Logo đầy đủ nhất 2025
Hôm qua 32 -
Lời cảm ơn, tri ân thầy cô hay và xúc động
Hôm qua 1 -
Thơ về hoa sen, câu nói về hoa sen hay và ý nghĩa
Hôm qua -
Một vạn bằng bao nhiêu?
Hôm qua 4 -
Code All Star Tower Defense 08/02/2025 mới nhất, đổi gems và stardust
Hôm qua 3 -
Các công thức đạo hàm và đạo hàm lượng giác đầy đủ nhất
Hôm qua -
5 cách lấy kim cương miễn phí trong Free Fire
Hôm qua 3 -
Cách điều chỉnh kích thước ô trong bảng Word bằng nhau
Hôm qua -
Công thức tính diện tích xung quanh hình nón cụt, diện tích toàn phần hình nón cụt, thể tích hình nón cụt
Hôm qua