Code mẫu JavaScript tạo biểu đồ nối hàm với trục thứ hai
Spline Chart hỗ trợ trục thứ hai hữu ích khi các giá trị trong biểu đồ có biến động lớn giữa các chuỗi dữ liệu. Ví dụ bên dưới trình bày một đồ thị về tốc độ, khoảng cách và thời gian bằng Spline Chart với trục thứ hai. Nó cũng chứa code JavaScript 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,
title:{
text: "Speed And Distance Time Graph"
},
toolTip: {
shared: true
},
axisX: {
title: "Time",
suffix : " s"
},
axisY: {
title: "Speed",
titleFontColor: "#4F81BC",
suffix : " m/s",
lineColor: "#4F81BC",
tickColor: "#4F81BC"
},
axisY2: {
title: "Distance",
titleFontColor: "#C0504E",
suffix : " m",
lineColor: "#C0504E",
tickColor: "#C0504E"
},
data: [{
type: "spline",
name: "speed",
xValueFormatString: "#### sec",
yValueFormatString: "#,##0.00 m/s",
dataPoints: [
{ x: 0 , y: 0 },
{ x: 11 , y: 8.2 },
{ x: 47 , y: 41.7 },
{ x: 56 , y: 16.7 },
{ x: 120 , y: 31.3 },
{ x: 131 , y: 18.2 },
{ x: 171 , y: 31.3 },
{ x: 189 , y: 61.1 },
{ x: 221 , y: 40.6 },
{ x: 232 , y: 18.2 },
{ x: 249 , y: 35.3 },
{ x: 253 , y: 12.5 },
{ x: 264 , y: 16.4 },
{ x: 280 , y: 37.5 },
{ x: 303 , y: 24.3 },
{ x: 346 , y: 23.3 },
{ x: 376 , y: 11.3 },
{ x: 388 , y: 8.3 },
{ x: 430 , y: 1.9 },
{ x: 451 , y: 4.8 }
]
},
{
type: "spline",
axisYType: "secondary",
name: "distance covered",
yValueFormatString: "#,##0.# m",
dataPoints: [
{ x: 0 , y: 0 },
{ x: 11 , y: 90 },
{ x: 47 , y: 1590 },
{ x: 56 , y: 1740 },
{ x: 120 , y: 3740 },
{ x: 131 , y: 3940 },
{ x: 171 , y: 5190 },
{ x: 189 , y: 6290 },
{ x: 221 , y: 7590 },
{ x: 232 , y: 7790 },
{ x: 249 , y: 8390 },
{ x: 253 , y: 8440 },
{ x: 264 , y: 8620 },
{ x: 280 , y: 9220 },
{ x: 303 , y: 9780 },
{ x: 346 , y: 10780 },
{ x: 376 , y: 11120 },
{ x: 388 , y: 11220 },
{ x: 430 , y: 11300 },
{ x: 451 , y: 11400 }
]
}]
});
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 biến biểu đồ
Bạn có thể tinh chỉnh biểu đồ nối hàm trên bằng cách thay đổi:
lineThickness
- độ dày của đường thẳnglineColor
- màu sắc của đường thẳngColor
- màu sắcmarkerType
- kiểu đánh dấumarkerBorderColor
- màu đường viền đánh dấu
229
Bạn nên đọc
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo biểu đồ đường với nhiều trục
-
Code JavaScript tạo biểu đồ đường có điểm ngắt trục
-
Code mẫu JavaScript tạo biểu đồ/đồ thị hàm nối trục
-
Code JavaScript tạo biểu đồ đường/tuyến với trục thang đo logarit
-
Code mẫu JavaScript đồng bộ tooltip trên nhiều biểu đồ/đồ thị
-
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
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Mua laptop Windows hiện khó hơn bao giờ hết
Hôm qua -
Pokemon Go - Thủ thuật tiến hóa Eevee thành bất cứ loại Pokemon nào
Hôm qua -
Cách tạo USB boot đa năng, USB cứu hộ bằng DLC Boot
Hôm qua -
Cách sửa lỗi IRQL NOT LESS OR EQUAL trên Windows
Hôm qua -
Tại sao giao diện Windows lại ngày càng rời rạc?
Hôm qua -
Hướng dẫn chèn chữ vào ảnh trong Word
Hôm qua -
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
Hôm qua -
Code GoGo Tam Quốc mới nhất
Hôm qua -
Đây là quốc gia duy nhất từng lấy cờ trắng làm quốc kỳ
Hôm qua -
Sửa lỗi Fatal Error Wuthering Waves
Hôm qua