Code JavaScript tạo biểu đồ dạng nến đa chuỗi dữ liệu
Biểu đồ hình nến đa chuỗi dữ liệu hữu ích khi bạn phải so sánh từ hai tập dữ liệu trở lên. Từng điểm dữ liệu bên trong đại diện cho các giá trị mở, cao, thấp và kín. Biểu đồ cây nến chủ yếu được dùng để trình bày giá cổ phiếu, ngoại hối, hàng hóa…
Ví dụ bên dưới minh họa một mẫu biểu đồ nến so sánh giá cổ phiếu của AT&T với Verizon vào năm 2016 được tạo bằng JavaScript. Bài viết cũng cung cấp mã nguồn cho bạn chỉnh sửa trong trình duyệt và 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,
theme: "light2", // bạn có thể thay bằng "light1", "light2", "dark1", "dark2"
exportEnabled: true,
title:{
text: "Giá cổ phiếu: So sánh AT&T và Verizon năm 2016"
},
axisX: {
valueFormatString: "MMM"
},
axisY: {
prefix: "$",
title: "Giá (USD)"
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: toogleDataSeries
},
data: [{
type: "candlestick",
showInLegend: true,
name: "AT&T",
yValueFormatString: "$###0.00",
xValueFormatString: "MMMM YY",
dataPoints: [
{ x: new Date(2016, 00, 01), y: [34.080002, 36.060001, 33.410000, 36.060001] },
{ x: new Date(2016, 01, 01), y: [36.040001, 37.500000, 35.790001, 36.950001] },
{ x: new Date(2016, 02, 01), y: [37.099998, 39.720001, 37.060001, 39.169998] },
{ x: new Date(2016, 03, 01), y: [38.669998, 39.360001, 37.730000, 38.820000] },
{ x: new Date(2016, 04, 01), y: [38.869999, 39.669998, 37.770000, 39.150002] },
{ x: new Date(2016, 05, 01), y: [39.099998, 43.419998, 38.580002, 43.209999] },
{ x: new Date(2016, 06, 01), y: [43.209999, 43.889999, 41.700001, 43.290001] },
{ x: new Date(2016, 07, 01), y: [43.250000, 43.500000, 40.549999, 40.880001] },
{ x: new Date(2016, 08, 01), y: [40.849998, 41.700001, 39.549999, 40.610001] },
{ x: new Date(2016, 09, 01), y: [40.619999, 41.040001, 36.270000, 36.790001] },
{ x: new Date(2016, 10, 01), y: [36.970001, 39.669998, 36.099998, 38.630001] },
{ x: new Date(2016, 11, 01), y: [38.630001, 42.840000, 38.160000, 40.380001] }
]
},
{
type: "candlestick",
showInLegend: true,
name: "Verizon",
yValueFormatString: "$###0.00",
dataPoints: [
{ x: new Date(2016, 00, 01), y: [45.669998, 49.990002, 43.790001, 49.970001] },
{ x: new Date(2016, 01, 01), y: [49.939999, 51.380001, 49.270000, 50.730000] },
{ x: new Date(2016, 02, 01), y: [50.990002, 54.369999, 50.980000, 54.080002] },
{ x: new Date(2016, 03, 01), y: [53.320000, 54.490002, 49.470001, 50.939999] },
{ x: new Date(2016, 04, 01), y: [51.220001, 51.700001, 49.049999, 50.900002] },
{ x: new Date(2016, 05, 01), y: [50.869999, 55.919998, 50.119999, 55.840000] },
{ x: new Date(2016, 06, 01), y: [55.849998, 56.950001, 54.439999, 55.410000] },
{ x: new Date(2016, 07, 01), y: [55.580002, 55.820000, 51.900002, 52.330002] },
{ x: new Date(2016, 08, 01), y: [52.139999, 53.880001, 51.020000, 51.980000] },
{ x: new Date(2016, 09, 01), y: [51.840000, 52.139999, 47.580002, 48.099998] },
{ x: new Date(2016, 10, 01), y: [48.320000, 51.200001, 46.009998, 49.900002] },
{ x: new Date(2016, 11, 01), y: [49.799999, 53.900002, 49.310001, 53.380001] }
]
}]
});
chart.render();
function toogleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.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 chỉnh biểu đồ
Bạn có thể hiện chú giải bằng cách đặt showInLegend
sang true
. Tính năng này thật sự hữu ích, giúp dữ liệu trên biểu đồ dễ đọc hơn. Những lựa chọn tùy biến liên quan khác bao gồm exportEnabled
, animationEnabled
…
304
Bạn nên đọc
-
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 biểu đồ/đồ thị đường dạng động
-
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
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và 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 đồ hình phễu có thể tùy chỉnh kích thước
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ/đồ thị độ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ắt đang soạn tin nhắn Zalo
Hôm qua -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
15 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3 -
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
18 mặt đồng hồ Apple Watch thông dụng nhất
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua