Code JavaScript tạo biểu đồ đường với các dấu dữ liệu hoặc đường
Các dấu đánh dấu dữ liệu hoặc đường thu hút sự chú ý vào điểm dữ liệu trong biểu đồ. Hầu hết các dấu đánh dấu và đường đều được tùy biến để làm nổi bật chuỗi hoặc mốc dữ liệu so với phần còn lại. Biểu đồ đường/tuyến hỗ trợ các kiểu đánh dấu dữ liệu khác nhau mà bạn có thể dùng để highlight mốc dữ liệu đặc biệt.
Ví dụ bên dưới hiển thị mẫu biểu đồ đường với các điểm được đánh dấu. Bạn cũng sẽ có code JavaScript nguồn để chỉnh sửa 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", {
theme: "light2", // có thể thay bằng "light1", "light2", "dark1", "dark2"
animationEnabled: true,
title:{
text: "Giá trị cổ phần - 2022"
},
axisX: {
interval: 1,
intervalType: "month",
valueFormatString: "MMM"
},
axisY:{
title: "Giá (USD)",
includeZero: true,
valueFormatString: "$#0"
},
data: [{
type: "line",
markerSize: 12,
xValueFormatString: "MMM, YYYY",
yValueFormatString: "$###.#",
dataPoints: [
{ x: new Date(2016, 00, 1), y: 61, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23" },
{ x: new Date(2016, 01, 1), y: 71, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23" },
{ x: new Date(2016, 02, 1) , y: 55, indexLabel: "loss", markerType: "cross", markerColor: "tomato" },
{ x: new Date(2016, 03, 1) , y: 50, indexLabel: "loss", markerType: "cross", markerColor: "tomato" },
{ x: new Date(2016, 04, 1) , y: 65, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23" },
{ x: new Date(2016, 05, 1) , y: 85, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23" },
{ x: new Date(2016, 06, 1) , y: 68, indexLabel: "loss", markerType: "cross", markerColor: "tomato" },
{ x: new Date(2016, 07, 1) , y: 28, indexLabel: "loss", markerType: "cross", markerColor: "tomato" },
{ x: new Date(2016, 08, 1) , y: 34, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23" },
{ x: new Date(2016, 09, 1) , y: 24, indexLabel: "loss", markerType: "cross", markerColor: "tomato" },
{ x: new Date(2016, 10, 1) , y: 44, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23" },
{ x: new Date(2016, 11, 1) , y: 34, indexLabel: "loss", markerType: "cross", markerColor: "tomato" }
]
}]
});
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>
</body>
</html>
Nguồn: CanvasJS
Tùy chỉnh biểu đồ/đồ thị
Bạn có thể dễ dàng chọn giữa các kiểu đánh dấu khác nhau bằng markerType
hoặc thay đổi kích thước của nó bằng markerSize
. Ngoài ra, bạn có thể chỉnh sửa:
markerColor
- Màu sắc đánh dấumarkerBorderColor
- Màu sắc đường viền đánh dấulineThickness
- Độ dày của đường
Bạn nên đọc
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo biểu đồ đường liền nét & nét đứt
-
Code JavaScript tạo biểu đồ đường với Zoom và Pan
-
JavaScript là gì?
-
Code mẫu JavaScript tạo biểu đồ dạng đường đơn giản
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Cách tạo công cụ đếm từ trong JavaScript
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:


Cũ vẫn chất
-
Cách vô hiệu hóa Facebook nhưng vẫn dùng Messenger
Hôm qua -
Tổng hợp các cách bật Bluetooth trên Windows 10/8/7
Hôm qua -
6 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 -
Một số cách sửa lỗi Start Menu trên Windows 10 ngừng hoạt động
Hôm qua 5 -
Cách sử dụng mail merge trong Word để trộn văn bản
Hôm qua -
3 cách cố định hình ảnh trong Word, khóa di chuyển để không làm ảnh hưởng bố cục
Hôm qua -
Khắc phục sự cố không thể chạy được file .exe
Hôm qua 4 -
Cách khóa trang cá nhân Facebook không cho người lạ xem
Hôm qua 2 -
Fake IP, phần mềm đổi IP, lướt web ẩn danh tốt nhất
Hôm qua -
Dãn hay giãn đúng chính tả? Co dãn hay Co giãn, Thư dãn hay Thư giãn mới đúng?
Hôm qua