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
-
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
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code mẫu JavaScript tạo biểu đồ/đồ thị hàm nối trục
-
Code mẫu JavaScript đồng bộ tooltip trên nhiều biểu đồ/đồ thị
-
Code JavaScript tạo biểu đồ đường với nhiều trục
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code JavaScript tạo biểu đồ đường có điểm ngắt trục
Xác thực tài khoản!
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:
Số điện thoại chưa đúng định dạng!
0 Bình luận
Sắp xếp theo

Xóa Đăng nhập để Gửi

Cũ vẫn chất
-
Che trở hay che chở đúng chính tả?
Hôm qua -
Những lời chúc sinh nhật mẹ hay và ý nghĩa nhất
Hôm qua -
Làm việc với File trong Python
Hôm qua -
Hướng dẫn toàn tập Word 2016 (Phần 28): Cách trộn văn bản, trộn thư Mail Merge
Hôm qua -
Cách sửa lỗi "We Couldn't Create a New Partition" trong Windows 10
Hôm qua -
Căn chỉnh - Align trong CSS
Hôm qua -
Xoay sở hay xoay xở mới đúng chính tả? Có đến 90% người dùng bị sai
Hôm qua -
1 thập kỷ, thế kỷ, thiên niên kỷ bằng bao nhiêu năm?
Hôm qua -
Hàm round() trong Python
Hôm qua -
Hàm map() trong Python
Hôm qua 2