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ẻ- …
296
Bài trước
Bạn nên đọc
-
Code JavaScript tạo biểu đồ/đồ thị phân tán/điểm
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
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 đồ/đồ thị box và whisker
-
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 JavaScript tạo biểu đồ bong bóng với điểm đánh dấu tùy biến
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ thu phóng với tính năng Zoom & Pan
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Cách tạo USB boot đa năng, USB cứu hộ bằng DLC Boot
Hôm qua -
Sửa lỗi Fatal Error Wuthering Waves
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 -
Mua laptop Windows hiện khó hơn bao giờ hế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 -
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
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 -
Code GoGo Tam Quốc mới nhất
Hôm qua -
Hướng dẫn chèn chữ vào ảnh trong Word
Hôm qua