Code JavaScript tạo mẫu biểu đồ/đồ thị box & whisker với màu tùy chỉnh
Bạn có thể dễ dàng tùy biến biểu đồ box & whisker qua các lựa chọn được CanvasJS cung cấp. Bạn dễ dàng chỉnh sửa hộp trên và dưới bằng các màu khác nhau. Thư viện cũng cung cấp lựa chọn thay đổi dòng Median/Mean, Whisker và Stem bằng màu sắc và độ dày.
Ví dụ bên dưới minh họa một mẫu biểu đồ box & whisker có thể tùy chỉnh màu sắc cho hộp trên và dưới được tạo bằng JavaScript. Bạn cũng sẽ có mã nguồn dể 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: "Mức lương hàng năm - Mỹ"
},
axisY: {
title: "Lương hàng nằm (USD)",
prefix: "$",
interval: 40000
},
data: [{
type: "boxAndWhisker",
upperBoxColor: "#FFC28D",
lowerBoxColor: "#9ECCB8",
color: "black",
yValueFormatString: "$#,##0",
dataPoints: [
{ label: "Điều dưỡng viên", y: [46360, 55320, 82490, 101650, 71000] },
{ label: "Lập trình web", y: [83133, 91830, 115828, 128982, 101381] },
{ label: "Phân tích hệ thống", y: [51910, 60143, 115056, 135450, 85800] },
{ label: "Kỹ sư ứng dụng", y: [63364, 71653, 91120, 100556, 80757] },
{ label: "Kỹ sư hàng không", y: [82725, 94361, 118683, 129191, 107142] },
{ label: "Nha sĩ", y: [116777, 131082, 171679, 194336, 146794] }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
Nguồn: CanvasJS
Tinh chỉnh biểu đồ
Nếu muốn tạo biểu đồ hộp như ý muốn, bạn có thể thay đổi các thuộc tính trong code JavaScript. Ví dụ:
upperBoxColor
: Màu hộp trênlowerBoxColor
: Màu hộp dướilineColor
: Màu đường kẻstemColor
: Màu stemwhiskerColor
: Màu whiskerstemThickness
: Độ dày stemcolor
: Màu sắclineDashType
: Kiểu gạch nétlineThickness
: Độ dày đường kẻ- …
283
Bạn nên đọc
-
Code JavaScript tạo biểu đồ bong bóng với điểm đánh dấu tùy biến
-
Code JavaScript tạo biểu đồ phân tán với các dấu tùy chỉnh
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo biểu đồ/đồ thị phân tán/điểm
-
Code JavaScript tạo biểu đồ/đồ thị box và whisker
-
Tổng hợp bài tập JavaScript có code mẫu
-
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 dạng động
0 Bình luận
Sắp xếp theo
![❖](https://st.quantrimang.com/photos/avatars/default.png)
Xóa Đăng nhập để Gửi
![❖](https://st.quantrimang.com/photos/image/icon/javascript-64-size-24x24-znd.png)
Cũ vẫn chất
-
Cách viết chữ màu Liên Quân Mobile
2 ngày 2 -
Khắc phục tình trạng các phím chức năng không hoạt động trong Windows 10
Hôm qua -
Cheat Aoe 2, mã lệnh Aoe 2 tất cả các bản đầy đủ nhất
Hôm qua -
Lực ma sát là gì? Có mấy loại lực ma sát?
2 ngày 1 -
Cách chuyển dữ liệu giữa các máy tính
2 ngày -
Cách xem phiên bản di động của một trang web bất kỳ trên máy tính
Hôm qua -
Cách view source, xem mã nguồn trang web bằng điện thoại, máy tính
Hôm qua 1 -
Cách sửa lỗi không tải được file lên Google Drive
Hôm qua -
Phần mở rộng file là gì?
Hôm qua -
Cách quản lý mật khẩu đã lưu trên Microsoft Edge: Xem, xóa, sửa, xuất
Hôm qua