Giới Thiệu

Biểu đồ đường là một công cụ hữu ích để trực quan hóa dữ liệu theo thời gian. Trong bài viết này, chúng ta sẽ khám phá cách tạo một biểu đồ đường tuần bằng SVG mà không cần sử dụng Power Apps. Phương pháp này giúp bạn dễ dàng nhúng biểu đồ vào ứng dụng mà không cần phụ thuộc vào các công cụ bên ngoài.

Cách Thức Hoạt Động

Biểu đồ sẽ được tạo ra bằng mã SVG, cho phép bạn hiển thị dữ liệu một cách linh hoạt và dễ dàng. Mã SVG giúp bạn tùy chỉnh biểu đồ theo ý muốn mà không cần phải cài đặt thêm bất kỳ thư viện nào.

Mã SVG Cơ Bản

Dưới đây là mã SVG cho biểu đồ đường tuần:

plaintext Copy

"data:image/svg+xml;utf8," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 140 70' shape-rendering='geometricPrecision' text-rendering='optimizeLegibility'>
  <title>Weekly line chart</title>
  <style>
    .grid { stroke: rgba(0,0,0,0); stroke-width: 0.4; }
    .axis-x { stroke: #d2d2d2; stroke-width: 0; }
    .line { stroke: #7551ff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .pt { fill: #ffffff; stroke: #7551ff; stroke-width: 1.2 }
    .label { font-family: Trebuchet MS, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 4px; fill: #2D396B; }
    .value { font-family: Trebuchet MS, sans-serif; font-size: 4px; fill: #7551ff; }
  </style>

  <!-- grade -->
  <g class='grid'>
    <path d='M6 62.5 H134'/><path d='M6 41.5 H134'/><path d='M6 20.5 H134'/>
  </g>

  <!-- eixo X -->
  <line x1='6' y1='64' x2='134' y2='64' class='axis-x'/>

  <!-- linha suavizada -->
  <path class='line'
        d='M6,62.15
           C9.55,57.84 20.22,38.31 27.33,36.31
           C34.44,34.31 41.56,52.30 48.67,50.15
           C55.78,47.99 62.89,27.23 70.00,23.38
           C77.11,19.54 84.22,22.03 91.33,27.08
           C98.44,32.13 105.56,55.51 112.67,53.66
           C119.78,51.81 130.44,22.28 134.00,16.00'
        pathLength='100' stroke-dasharray='100' stroke-dashoffset='100'>
    <animate attributeName='stroke-dashoffset' dur='1.6s' begin='0s'
             values='100;0' keyTimes='0;1' calcMode='spline'
             keySplines='.25 .1 .25 1' fill='freeze'/>
  </path>

  <!-- pontos + valores (deslocados para caber bem) -->
  <g>
    <circle class='pt' cx='6' cy='62.15' r='1'/><text class='value' x='6' y='57' text-anchor='middle'>1</text>
    <circle class='pt' cx='27.33' cy='36.31' r='1'/><text class='value' x='27.33' y='31' text-anchor='middle'>15</text>
    <circle class='pt' cx='48.67' cy='50.15' r='1'/><text class='value' x='48.67' y='45' text-anchor='middle'>7.5</text>
    <circle class='pt' cx='70' cy='23.38' r='1'/><text class='value' x='70' y='18' text-anchor='middle'>22</text>
    <circle class='pt' cx='91.33' cy='27.08' r='1'/><text class='value' x='91.33' y='22' text-anchor='middle'>20</text>
    <circle class='pt' cx='112.67' cy='53.66' r='1'/><text class='value' x='112.67' y='48' text-anchor='middle'>5.6</text>
    <circle class='pt' cx='134' cy='16' r='1'/><text class='value' x='134' y='11' text-anchor='middle'>26</text>
  </g>

  <!-- rótulos do eixo X -->
  <g class='label' text-anchor='middle'>
    <text x='6' y='69' text-anchor='start'>Mon</text>
    <text x='27.33' y='69'>Tue</text>
    <text x='48.67' y='69'>Wed</text>
    <text x='70' y='69'>Thr</text>
    <text x='91.33' y='69'>Fri</text>
    <text x='112.67' y='69'>Sat</text>
    <text x='134' y='69' text-anchor='end'>Sun</text>
  </g>
</svg>")

Hướng Dẫn Sử Dụng

Để sử dụng biểu đồ này trong ứng dụng của bạn, hãy làm theo các bước sau:

Thêm một điều khiển hình ảnh vào màn hình của bạn.
Trong thuộc tính Hình ảnh, dán nội dung của khối mã SVG phía trên (bắt đầu bằng data:image/svg+xml;utf8, + EncodeUrl(...)).
Điều chỉnh kích thước của hình ảnh (ví dụ: Chiều rộng 400 / Chiều cao 200) để duy trì tỷ lệ.
Thay đổi các giá trị trong mã SVG để phù hợp với dữ liệu của bạn (ví dụ: 1, 15, 7.5, 22, ...).

Các Thực Hành Tốt Nhất

Tùy chỉnh Màu Sắc: Bạn có thể thay đổi màu sắc của đường và điểm bằng cách chỉnh sửa mã CSS trong thẻ <style>.
Thêm Hiệu Ứng: Sử dụng thuộc tính animate để tạo thêm hiệu ứng cho biểu đồ, giúp nó trở nên sinh động hơn.
Thay Đổi Kích Thước: Đảm bảo rằng kích thước của SVG phù hợp với không gian mà bạn có trong ứng dụng.

Những Cạm Bẫy Thường Gặp

Không Hiển Thị Đúng Kích Thước: Kiểm tra thuộc tính chiều rộng và chiều cao của hình ảnh để đảm bảo biểu đồ hiển thị chính xác.
Dữ Liệu Không Đúng: Đảm bảo rằng bạn đã cập nhật đúng các giá trị trong mã SVG để phản ánh chính xác dữ liệu bạn muốn biểu diễn.

Mẹo Tối Ưu Hiệu Suất

Giảm Kích Thước Tệp: Nếu bạn sử dụng nhiều biểu đồ, hãy tối ưu hóa mã SVG để giảm kích thước tệp và cải thiện tốc độ tải.
Sử Dụng Lại Mã: Nếu bạn có nhiều biểu đồ tương tự, hãy tạo một hàm để tái sử dụng mã SVG, chỉ cần thay đổi các giá trị cần thiết.

Giải Quyết Vấn Đề

Nếu bạn gặp phải vấn đề về việc không thể hiển thị biểu đồ:

Kiểm Tra Lỗi Cú Pháp: Đảm bảo rằng mã SVG không có lỗi cú pháp.
Xem Xét Trình Duyệt: Một số trình duyệt có thể không hỗ trợ đầy đủ SVG. Hãy thử trên các trình duyệt khác để kiểm tra.

Kết Luận

Tạo biểu đồ đường tuần bằng SVG là một phương pháp hiệu quả để trực quan hóa dữ liệu mà không cần sử dụng Power Apps. Bằng cách làm theo hướng dẫn trên, bạn có thể dễ dàng tích hợp biểu đồ vào ứng dụng của mình. Hãy bắt đầu ngay hôm nay và chia sẻ những biểu đồ tuyệt đẹp với cộng đồng của bạn!

Câu Hỏi Thường Gặp (FAQ)

1. Có cần cài đặt thư viện nào không?

Không, bạn chỉ cần sử dụng mã SVG mà chúng tôi cung cấp.

2. Làm thế nào để thay đổi màu sắc của biểu đồ?

Chỉnh sửa mã CSS trong thẻ <style> của mã SVG.

3. Biểu đồ có thể hiển thị trên điện thoại di động không?

Có, SVG là định dạng linh hoạt và có thể hiển thị tốt trên các thiết bị khác nhau.

Biểu Đồ Đường Tuần (SVG) Không Cần Power Apps