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
…
286
Bạn nên đọc
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Múi giờ các nước trên thế giới và bản đồ múi giờ thế giới
Hôm qua -
Hình ảnh img trong HTML
Hôm qua -
Hướng dẫn cách khóa, ẩn Fanpage Facebook tạm thời
Hôm qua -
Hướng dẫn cài đặt Arch Linux cơ bản
Hôm qua 1 -
Cách chèn, xóa bỏ watermark trong tài liệu Word
Hôm qua -
Top 5 tai nghe headphone không dây tốt nhất năm 2025
Hôm qua -
Stt chất từ lời bài hát, cap lời bài hát hay và ý nghĩa về tình yêu, cuộc sống
Hôm qua -
Liên Quân Mobile: Chi tiết cập nhật phiên bản Lễ hội 5v5
Hôm qua -
Thiếu sót hay thiếu xót đúng chính tả?
Hôm qua -
Cách chuyển dung lượng trống từ phân vùng này sang phân vùng khác trong Windows 10
Hôm qua