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
-
Code JavaScript tạo biểu đồ đường/tuyến với trục thang đo logarit
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code mẫu JavaScript đồng bộ tooltip trên nhiều biểu đồ/đồ thị
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo biểu đồ đường với nhiều trục
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ đường có điểm ngắt trục
-
JavaScript là gì?
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua -
Cách xóa đường kẻ ngang trong Word
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 -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
18 mặt đồng hồ Apple Watch thông dụng nhất
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 -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua