Biểu đồ với các nhãn trục & đánh dấu trong vùng dữ liệu

Kandy Kandy

Trong một số trường hợp, đặt các nhãn trục và tick bên trong vùng biểu thị dữ liệu có thể tiết kiệm không gian, đồng thời cải thiện trải nghiệm người dùng.

Ví dụ bên dưới cho bạn biết cách tạo một biểu đồ như thế bằng code JavaScript. Bạn có thể chỉnh sửa mã nguồn trong trình duyệt hoặc lưu về máy để chạy nội bộ.

Biểu đồ JavaScript

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "dark2", // bạn có thể thay bằng "light1", "light2", "dark1"
  animationEnabled: true,
  exportEnabled: true,
  title: {
    text: "Top 10 video YouTube được xem nhiều nhất"
  },
  axisX: {
    margin: 10,
    labelPlacement: "inside",
    tickPlacement: "inside"
  },
  axisY2: {
    title: "Lượt xem (Tỷ)",
    titleFontSize: 14,
    includeZero: true,
    suffix: "bn"
  },
  data: [{
    type: "bar",
    axisYType: "secondary",
    yValueFormatString: "#,###.##bn",
    indexLabel: "{y}",
    dataPoints: [
      { label: "Sugar - Maroon 5", y: 3.25 },
      { label: "Sorry - Justin Bieber", y: 3.32 },
      { label: "Johny Johny Yes Papa", y: 3.63 },
      { label: "Gangnam Style", y: 3.72 },
      { label: "Uptown Funk", y: 3.90 },
      { label: "Masha and the Bear", y: 4.32 },
      { label: "See You Again", y: 4.66 },
      { label: "Shape of You", y: 4.91 },
      { label: "Baby Shark Dance", y: 6.13 },
      { label: "Despacito", y: 6.88 }
    ]
  }]
});
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 đồ

Bạn có thể thay đổi màu sắc và độ dày của các đường trong trục bằng lineColor và lineThickness.

Ngoài ra, bạn còn có một số lựa chọn tùy chỉnh khác, chẳng hạn như:

tickLength - độ dài của dấu đánh dấu
tickThickness - độ dày của dấu đánh dấu

Như bạn thấy, mẫu biểu đồ bằng code JavaScript này khá sinh động và giàu thông tin. Khi được gắn nhãn cụ thể, người xem dễ dàng nắm bắt được số liệu hay đọc biểu đồ dễ hơn. Bạn có thể dựa vào code JavaScript trên để tạo mẫu biểu đồ tương tự như ý muốn.

Thứ Tư, 11/01/2023 14:18

3 ★ 1 👨 159

#JavaScript