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.
Bạn nên đọc
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo biểu đồ & đồ thị sai số
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ/đồ thị đường sai số
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
JavaScript là gì?
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo biểu đồ box và whisker chứa điểm ngoại lai
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách khắc phục tình trạng tên Facebook bị đổi
Hôm qua -
3 cách đơn giản để tải file phát âm trên Google Dịch
Hôm qua 1 -
Những ứng dụng hoán đổi khuôn mặt tốt nhất
Hôm qua -
Cách xem lịch sử nạp Liên Quân nhanh chóng
Hôm qua -
Cách tạo Slide Master trên PowerPoint
Hôm qua -
6 cách siêu dễ thêm phụ đề, caption vào video
Hôm qua -
10 cách sử dụng Generative Fill để cải thiện ảnh trong Photoshop
Hôm qua -
Cách sửa lỗi gõ tiếng Việt trên Word, Excel
Hôm qua -
Hướng dẫn tạo avatar Tik Tok trong suốt
Hôm qua -
Cách nhập mật khẩu từ file CSV vào Google Chrome
Hôm qua 1