Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo biểu đồ và đồ thị xếp chồng thanh bằng JavaScript. Sử dụng thư viện D3.js, chúng ta có thể tạo ra các biểu đồ hấp dẫn và tương tác dễ dàng. Dưới sự hướng dẫn chi tiết, bạn sẽ học cách tạo các trục, thiết lập dữ liệu và kích thước biểu đồ, và thêm các hiệu ứng chuyển động và tương tác. Bằng cách áp dụng những kiến thức này, bạn sẽ có khả năng tạo ra các biểu đồ và đồ thị xếp chồng thanh đẹp mắt và phù hợp với nhu cầu của mình.
Viết lại:
Viết JS tạo biểu đồ & đồ thị xếp chồng thanh.
Biểu đồ thanh chồng JavaScript cho phép so sánh tỷ lệ dữ liệu và có tính năng tương tác, hoạt ảnh và xuất dưới dạng hình ảnh.
Dưới đây là một ví dụ minh họa về một biểu đồ xếp chồng thanh được tạo bằng JavaScript. Bài viết này đi kèm với mã nguồn HTML mà bạn có thể chỉnh sửa trong trình duyệt hoặc tải về máy để chạy ngoại tuyến.
Dưới đây là một mẫu biểu đồ xếp chồng thanh được tạo bằng JavaScript. Bài viết này kèm theo mã HTML mà bạn có thể chỉnh sửa trong trình duyệt hoặc tải về để chạy nội tuyến.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Doanh thu buổi tối ở một nhà hàng"
},
axisX: {
valueFormatString: "DDD"
},
axisY: {
prefix: "$"
},
toolTip: {
shared: true
},
legend:{
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [{
type: "stackedBar",
name: "Bữa ăn",
showInLegend: "true",
xValueFormatString: "DD, MMM",
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2017, 0, 30), y: 56 },
{ x: new Date(2017, 0, 31), y: 45 },
{ x: new Date(2017, 1, 1), y: 71 },
{ x: new Date(2017, 1, 2), y: 41 },
{ x: new Date(2017, 1, 3), y: 60 },
{ x: new Date(2017, 1, 4), y: 75 },
{ x: new Date(2017, 1, 5), y: 98 }
]
},
{
type: "stackedBar",
name: "Ăn nhẹ",
showInLegend: "true",
xValueFormatString: "DD, MMM",
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2017, 0, 30), y: 86 },
{ x: new Date(2017, 0, 31), y: 95 },
{ x: new Date(2017, 1, 1), y: 71 },
{ x: new Date(2017, 1, 2), y: 58 },
{ x: new Date(2017, 1, 3), y: 60 },
{ x: new Date(2017, 1, 4), y: 65 },
{ x: new Date(2017, 1, 5), y: 89 }
]
},
{
type: "stackedBar",
name: "Đồ uống",
showInLegend: "true",
xValueFormatString: "DD, MMM",
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2017, 0, 30), y: 48 },
{ x: new Date(2017, 0, 31), y: 45 },
{ x: new Date(2017, 1, 1), y: 41 },
{ x: new Date(2017, 1, 2), y: 55 },
{ x: new Date(2017, 1, 3), y: 80 },
{ x: new Date(2017, 1, 4), y: 85 },
{ x: new Date(2017, 1, 5), y: 83 }
]
},
{
type: "stackedBar",
name: "Tráng miệng",
showInLegend: "true",
xValueFormatString: "DD, MMM",
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2017, 0, 30), y: 61 },
{ x: new Date(2017, 0, 31), y: 55 },
{ x: new Date(2017, 1, 1), y: 61 },
{ x: new Date(2017, 1, 2), y: 75 },
{ x: new Date(2017, 1, 3), y: 80 },
{ x: new Date(2017, 1, 4), y: 85 },
{ x: new Date(2017, 1, 5), y: 105 }
]
},
{
type: "stackedBar",
name: "Đem về",
showInLegend: "true",
xValueFormatString: "DD, MMM",
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2017, 0, 30), y: 52 },
{ x: new Date(2017, 0, 31), y: 55 },
{ x: new Date(2017, 1, 1), y: 20 },
{ x: new Date(2017, 1, 2), y: 35 },
{ x: new Date(2017, 1, 3), y: 30 },
{ x: new Date(2017, 1, 4), y: 45 },
{ x: new Date(2017, 1, 5), y: 25 }
]
}]
});
chart.render();
function toggleDataSeries(e) {
if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
}
</script>
</head>
<body>
<div ></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>Tham khảo: CanvasJS
Tùy biến biểu đồ
Bạn có thể thay đổi màu sắc của từng chuỗi dữ liệu để dễ phân biệt hơn. Một số lựa chọn phổ biến khác bao gồm hiển thị chú giải (showInLegend), chia sẻ tooltip (shared trong toolTip), độ rộng của điểm dữ liệu (dataPointWidth), vv.
Nguồn: Mã JavaScript để tạo biểu đồ và đồ thị xếp chồng thanh