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ẻ- …
295
Bạn nên đọc
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ/đồ thị box và whisker
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ thu phóng với tính năng Zoom & Pan
-
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 đồ đa chuỗi update dữ liệu trực tiếp
-
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
-
Code JavaScript tạo biểu đồ phân tán với các dấu tùy chỉnh
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
DTCL mùa 9.5: Runeterra Tái Hợp - Chân Trời Mới
Hôm qua 5 -
Irelia DTCL: Lên đồ Irelia mùa 11, đồ chuẩn Irelia DTCL
Hôm qua -
Các cách reset mật khẩu BIOS hoặc gỡ mật khẩu BIOS
Hôm qua -
Cách khắc phục lỗi bo mạch chủ hiện đèn báo màu đỏ
Hôm qua -
Cách đặt độ phân giải tùy chỉnh trong OBS
Hôm qua -
Những điểm khác biệt giữa "đàn ông" và "con trai"
Hôm qua -
Cách thêm ngắt trang trong Google Docs
Hôm qua -
Ưu và nhược điểm của Internet
Hôm qua -
14 trang web tải miễn phí phần mềm an toàn
Hôm qua -
Kích hoạt hoặc vô hiệu hóa tài khoản Administrator được tích hợp sẵn trên Windows
Hôm qua