Code mẫu JavaScript tạo biểu đồ kim tự tháp với các nhãn chỉ mục/dữ liệu
Các nhãn chỉ mục và dữ liệu cung cấp thêm thông tin về điểm dữ liệu trong biểu đồ. Bạn có thể đặt chúng ở bên trong hoặc ngoài kim tự tháp.
Ví dụ bên dưới minh hoạ một mẫu biểu đồ kim tự tháp có nhãn chỉ mục ở bên trong. Bạn sẽ có cả code mẫu JavaScript để 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,
exportEnabled: true,
theme: "light2",
title:{
text: "Biểu đồ rủi ro khi quảng cáo"
},
data: [{
type: "pyramid",
toolTipContent: "<b>{label}</b>: {y}%",
indexLabelFontColor: "#5A5757",
indexLabelFontSize: 16,
indexLabel: "{label}({y}%)",
indexLabelPlacement: "inside",
dataPoints: [
{ y: 15, label: "Trả tiền quảng cáo theo mỗi click" },
{ y: 25, label: "Tài trợ trang web" },
{ y: 25, label: "Quảng cáo qua banner" },
{ y: 40, label: "Quảng cáo tương tác" },
{ y: 60, label: "Quảng cáo truyền thống" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Nguồn: CanvasJs
Tùy chỉnh biểu đồ
Vị trí nhãn chỉ mục/dữ liệu có thể được đặt bên trong hoặc bên ngoài bằng cách đặt thuộc tính indexLabelPlacement
thành inside
hoặc outside
.
Khi các nhãn index được đặt bên ngoài, chúng vừa được kết nối với các điểm dữ liệu trong một dòng. Dòng này có thể được tùy biến bằng thuộc tính indexLabelLineColor
, indexLabelLineThickness
…
Bạn nên đọc
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
-
20+ cách giải phóng RAM trên máy tính Windows 10, reset RAM Win 10 đơn giản nhất
Hôm qua -
Cách đánh số trang bỏ trang đầu, đánh số từ trang bất kỳ trong Word chi tiết nhất
Hôm qua -
Những câu nói cà khịa người yêu cũ, stt cà khịa người yêu cũ bá đạo
Hôm qua 2 -
Số thập phân là gì? Các phép tính với số thập phân
Hôm qua -
Cách cài đặt Python trên Windows, macOS, Linux
Hôm qua -
Cách giả lập CASIO FX-580VN X trên máy tính, điện thoại
Hôm qua 1 -
Đọc/ghi File trong C++ | fstream trong C++
Hôm qua 1 -
Mảng (Array) trong C/C++
Hôm qua 1 -
Trực tâm là gì? Xác định trực tâm trong tam giác
Hôm qua 1 -
Hàng ngày hay hằng ngày? Khi nào dùng 'hàng ngày', khi nào dùng 'hằng ngày'
Hôm qua