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
144
Bạn nên đọc
-
Cách tạo công cụ đếm từ trong JavaScript
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code mẫu JavaScript tạo biểu đồ dạng đường đơn giản
-
Code JavaScript tạo biểu đồ đường với Zoom và Pan
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo mẫu biểu đồ đường nhiều chuỗi
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
18 mặt đồng hồ Apple Watch thông dụng nhất
Hôm qua -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua -
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 -
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
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 -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua