Code biểu đồ/đồ thị thanh kết hợp sai số
Biểu đồ độ sai/sai số cho bạn thấy sơ qua các biên độ lỗi và độ tin cậy. Đồ thị sai số kết hợp với biểu đồ thanh sẽ tạo thành biểu đồ thanh sai số.
Ví dụ bên dưới minh họa một mẫu biểu đồ thanh kết hợp với sai số được tạo bằng JavaScript. Như bạn thấy, dạng biểu đồ này hỗ trợ cả hiệu ứng động, thu phóng, xoay, sự kiện, xuất dưới dạng ảnh và tương thích chéo trình duyệt. Bài viết cũng cung cấp mã nguồn cho bạn chỉnh sửa trong trình duyệt hoặc lưu về máy dể chạy nội bộ.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "QOS - Kết quả khảo sát"
},
axisY:{
title: "Giá trị phản hồi",
includeZero: true,
interval: 10
},
toolTip: {
shared: true
},
data: [{
type: "bar",
name: "Điểm trung bình",
toolTipContent: "<b>{label}</b> <br> <span style=\"color:#4F81BC\">{name}</span>: {y}",
dataPoints: [
{ y: 94, label: "Độ chính xác của đơn hàng" },
{ y: 74, label: "Đóng gói" },
{ y: 80, label: "Số lượng" },
{ y: 88, label: "Chất lượng" },
{ y: 76, label: "Vận chuyển" }
]
},
{
type: "error",
name: "Phạm vi thay đổi",
toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y[0]} - {y[1]}",
dataPoints: [
{ y: [92, 98], label: "Đơn hàng chính xác" },
{ y: [70, 78], label: "Đóng gói" },
{ y: [78, 85], label: "Số lượng" },
{ y: [85, 92], label: "Chất lượng" },
{ y: [72, 78], label: "Vận chuyển" }
]
}]
});
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
Tùy biến biểu đồ
Bạn thoải mái chỉnh sửa biểu đồ này như ý muốn bằng cách thay đổi các thuộc tính. Ví dụ:
linkedDataSeriesIndex
: Liên kết một chuỗi lỗi tới chuỗi dữ liệu khác trong biểu đồ.stemColor
: Màu thân.whiskerThickness
: Độ dày điểm cực trị.Color
: Màu sắc.
267
Bài trước
Bạn nên đọc
-
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 đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo biểu đồ & đồ thị sai số
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ box và whisker chứa điểm ngoại lai
-
Code JavaScript tạo biểu đồ/đồ thị đường sai số
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo mẫu biểu đồ/đồ thị box & whisker với mà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
-
Cách sử dụng lịch sử Clipboard trong Windows 10
Hôm qua -
Gia chủ tuổi Tuất nên chọn ai xông đất, xông nhà hợp năm 2024
Hôm qua 1 -
Code HTHT mới nhất tháng 2, giftcode Huyền Thoại Hải Tặc mới nhất 2024
Hôm qua 23 -
Hướng dẫn chèn chữ vào ảnh trong Word
Hôm qua -
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
Hôm qua -
Lời chúc ngày Gia đình Việt Nam 28/6 hay và ý nghĩa
Hôm qua 2 -
Câu lệnh COALESCE trong SQL Server
Hôm qua -
Cách xem thông tin chi tiết về hệ thống và phần cứng Linux trên dòng lệnh
Hôm qua -
Địa chỉ 26 cửa hàng Uniqlo chính hãng tại Việt Nam
Hôm qua -
Code GoGo Tam Quốc mới nhất
Hôm qua