Code JavaScript tạo mẫu biểu đồ Pareto với nhãn Index/Data
Nhãn index/data được dùng để hiện một số thông tin bổ sung về các điểm dữ liệu. Bạn có thể dễ dàng thêm và tùy biến các nhãn index/data vào biểu đồ pareto. Ví dụ bên dưới minh họa biểu đồ Pareto kèm các nhãn data/index được tạo bằng JavaScript.
Bài viết cũng cung cấp mã nguồn cho bạn chỉnh sửa thoải mái 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", {
title:{
text: "Phàn nàn của khách hàng"
},
axisY: {
title: "Số lượt đánh giá",
lineColor: "#4F81BC",
tickColor: "#4F81BC",
labelFontColor: "#4F81BC",
gridThickness: 0
},
axisY2: {
title: "Phần trăm",
suffix: "%",
gridThickness: 0,
lineColor: "#C0504E",
tickColor: "#C0504E",
labelFontColor: "#C0504E"
},
data: [{
type: "column",
dataPoints: [
{ label: "Đỗ xe", y: 3050 },
{ label: "Đại diện bán hàng thô lỗ", y: 1100 },
{ label: "Ánh sáng kém", y: 850 },
{ label: "Bố cục khó hiểu", y: 480 },
{ label: "Kích thước hạn chế", y: 350 },
{ label: "Quần áo bạc màu", y: 180 },
{ label: "Quần áo bị co", y: 120 }
]
}]
});
chart.render();
createPareto();
function createPareto(){
var dps = [];
var yValue, yTotal = 0, yPercent = 0;
for(var i = 0; i < chart.data[0].dataPoints.length; i++)
yTotal += chart.data[0].dataPoints[i].y;
for(var i = 0; i < chart.data[0].dataPoints.length; i++) {
yValue = chart.data[0].dataPoints[i].y;
yPercent += (yValue / yTotal * 100);
dps.push({label: chart.data[0].dataPoints[i].label, y: yPercent });
}
chart.addTo("data", {type:"line", axisYType: "secondary", yValueFormatString: "0.##\"%\"", indexLabel: "{y}", indexLabelFontColor: "#C24642", dataPoints: dps});
chart.axisY[0].set("maximum", yTotal, false);
chart.axisY2[0].set("maximum", 105, false );
chart.axisY2[0].set("interval", 25 );
}
}
</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 có thể thay đổi màu sắc của đường thẳng bằng thuộc tính lineColor
. Những lựa chọn tùy biến khác bao gồm:
indexLabel
: Nhãn chỉ mụcindexLabelFontColor
: Màu font nhãn chỉ mụcindexLabelFontSize
: Kích thước font nhãn chỉ mục…
343
Bạn nên đọc
-
Code JavaScript tạo biểu đồ box và whisker chứa điểm ngoại lai
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
JavaScript là gì?
-
Code biểu đồ/đồ thị thanh kết hợp sai số
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo biểu đồ & đồ thị sai số
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Bro là gì? Ý nghĩa của Bro?
Hôm qua -
Hướng dẫn sử dụng ổ USB Flash với thiết bị Android
Hôm qua -
Cách tắt app chạy ngầm Windows 11, giảm ngốn RAM trên Win 11
Hôm qua -
Code Đại Hiệp Chạy Đi mới nhất và cách nhập code
Hôm qua -
Cách thêm máy in vào Windows 10
Hôm qua 2 -
Slogan là gì? 90+ Slogan hay, những câu slogan chất, ngắn gọn, ý nghĩa nhất
Hôm qua -
Hàm RIGHT, cách dùng hàm cắt chuỗi ký tự bên phải trong Excel
Hôm qua -
Thủ thuật tạo shortcut chạy ứng dụng dưới quyền Admin
Hôm qua -
Cách sửa lỗi “Ethernet doesn’t have a valid IP configuration”
Hôm qua -
Cách lấy dữ liệu từ web vào Excel
Hôm qua