Sử Dụng 20 loại biểu đồ Power Apps khác với QuickChart

Biểu đồ là một cách hữu ích để cho phép người đọc nhanh chóng hiểu dữ liệu và xác định các mối quan hệ của dữ liệu. Trong Power Apps, chúng ta chỉ có sẵn một số loại biểu đồ cơ bản (cột, đường, hình tròn) và khả năng tùy chọn hạn chế để tạo kiểu. Với QuickChart, chúng ta có thể mở rộng Power Apps để sử dụng hơn 20 loại biểu đồ khác nhau và có nhiều lựa chọn hơn về hình thức thể hiện chúng.

Trong bài viết này, tôi sẽ chỉ cho bạn cách thêm nhiều loại biểu đồ Power Apps hơn bằng cách sử dụng Quickchart. 

API QuickChart là gì? 

QuickChart là một API có thể được sử dụng bên trong Power Apps để tạo hình ảnh của biểu đồ. Với QuickChart, có sẵn nhiều loại biểu đồ và tùy chọn kiểu hơn so với bộ Power Apps rất hạn chế. 

Để tạo biểu đồ, chúng ta có thể đặt URL này trong thuộc tính Hình ảnh của điều khiển hình ảnh Power Apps và nó sẽ xuất hiện trên màn hình. URL chứa cả dữ liệu được đưa vào biểu đồ và thông tin về cách định dạng biểu đồ. 

“https://quickchart.io/chart?c={type:’bar’,data:{labels:[‘Q1′,’Q2′,’Q3′,’Q4’], datasets:[{label:’Users’,data:[50,60,70,180]},{label:’Revenue’,data:[100,200,300,400]}]}}” 

Power Apps chỉ có 3 loại biểu đồ tiêu chuẩn (cột, đường, hình tròn). Quickchart cho phép chúng tôi sử dụng tất cả 21 loại biểu đồ được liệt kê bên dưới. 

Giới thiệu: Ứng dụng theo dõi bán hàng 

Người quản lý tại một Công ty bảo hiểm sử dụng ứng dụng Trình theo dõi doanh số để xem nhân viên bán hàng đang hoạt động như thế nào. Người quản lý chọn một tháng cụ thể từ danh sách thả xuống và biểu đồ thanh hiển thị tên của từng nhân viên bán hàng cùng với doanh số bán hàng hàng tháng của họ. 

Thiết lập danh sách SharePoint 

Tạo danh sách SharePoint List có tên là Monthly Sales với các cột sau: 

• Employee (Single-line Text) 
• Period (Single-line Text) 
• Revenue (Number) 

Sau khi tạo SharePoint List tải với dữ liệu bên dưới vào List:

 Chọn một loại biểu đồ 

Truy cập QuickChart và mở trang Thư viện biểu đồ để xem tất cả các loại biểu đồ khả thi mà chúng ta có thể thêm vào Power Apps. Chọn loại biểu đồ Ngang.

Trang Biểu đồ ngang bao gồm một JSON mẫu chứa thông tin biểu đồ. Sao chép và dán mã này vào trình soạn thảo văn bản, chẳng hạn như Windows Notepad.

Tìm và thay thế dấu ngoặc kép (“) bằng dấu ngoặc đơn (‘). Chúng ta muốn sử dụng JSON này để xác định biểu đồ trong Power Apps nhưng vấn đề là dấu ngoặc kép sẽ được hiểu là một chuỗi văn bản. May mắn thay, JSON xử lý cả dấu ngoặc đơn và dấu ngoặc kép theo cùng một cách.

Tạo hình ảnh biểu đồ 

Mở Power Apps Studio và tạo một ứng dụng mới từ chỗ trống. Chèn một hình ảnh vào giữa màn hình.

Viết mã này vào thuộc tính Image của Hình ảnh. Đó là một URL chứa hai phần: URL cơ sở và JSON với định nghĩa biểu đồ. Lưu ý rằng mã JSON mà chúng ta đã chuẩn bị bên trong trình soạn thảo văn bản của mình được bao bọc trong hàm EncodeUrl để thay thế mọi giá trị không phải chữ và số thành giá trị thập lục phân có thể đọc được bên trong trình duyệt web.

“https://quickchart.io/chart?c=”&EncodeUrl(“{
   ‘type’: ‘horizontalBar’,
   ‘data’: {
     ‘labels’: [
       ‘January’,
       ‘February’,
       ‘March’,
       ‘April’,
       ‘May’,
       ‘June’,
       ‘July’
     ],
     ‘datasets’: [
       {
         ‘label’: ‘Dataset 1‘,
         ‘backgroundColor’: ‘rgba(255, 99, 132, 0.5)’,
         ‘borderColor’: ‘rgb(255, 99, 132)’,
         ‘borderWidth’: 1,
         ‘data’: [
           –32,
           62,
           64,
           41,
           –31,
           –32,
           87
         ]
       },
       {
         ‘label’: ‘Dataset 2‘,
         ‘backgroundColor’: ‘rgba(54, 162, 235, 0.5)’,
         ‘borderColor’: ‘rgb(54, 162, 235)’,
         ‘data’: [
           9,
           –100,
           –13,
           64,
           –57,
           26,
           20
         ]
       }
     ]
   },
   ‘options’: {
     ‘elements’: {
       ‘rectangle’: {
         ‘borderWidth’: 2
       }
     },
     ‘responsive’: true,
     ‘legend’: {
       ‘position’: ‘right’
     },
     ‘title’: {
       ‘display’: true,
       ‘text’: ‘Chart.js Horizontal Bar Chart’
     }
   }
}”) 

Sau khi nhập mã, một biểu đồ mẫu sẽ xuất hiện bên trong Hình ảnh.

Tải biểu đồ với dữ liệu danh sách SharePoint 

Các nhà quản lý tại Công ty bảo hiểm xem xét hiệu suất bằng cách xem biểu đồ hiển thị từng nhân viên bán hàng và doanh thu hàng tháng của họ. Mục tiêu tiếp theo của chúng ta là cập nhật biểu đồ mẫu với dữ liệu bán hàng. Mở tab dữ liệu và thêm danh sách SharePoint Bán hàng Hàng tháng làm nguồn dữ liệu.

Sau đó, chuyển đến thuộc tính Image của biểu đồ mẫu và thay đổi nó thành mã này. Các nhãn và giá trị dữ liệu mặc định đã được thay thế bằng thông tin từ SharePoint List. Chúng ta sử dụng hàm Concat để thay đổi dữ liệu bảng thành chuỗi văn bản để có thể chuyển dữ liệu đó vào URL.

“https://quickchart.io/chart?c=”&EncodeUrl(“{
   ‘type’: ‘horizontalBar’,
   ‘data’: {
     ‘labels’: [“&Concat(‘Monthly Sales’,”‘“&Employee&”‘,“)&”],
     ‘datasets’: [
       {
         ‘label’: ‘Dataset 2‘,
         ‘backgroundColor’: ‘rgba(54, 162, 235, 0.5)’,
         ‘borderColor’: ‘rgb(54, 162, 235)’,
         ‘borderWidth’: 1,
         ‘data’: [“&Concat(‘Monthly Sales’,”‘“&Revenue&”‘,“)&”]
       }
     ]
   },
   ‘options’: {
     ‘elements’: {
       ‘rectangle’: {
         ‘borderWidth’: 2
       }
     },
     ‘responsive’: true,
     ‘legend’: {
       ‘display’: false
     },
     ‘title’: {
       ‘display’: true,
       ‘text’: ‘Sales Amount by Salesperson’
     }
   }
}”) 

Giờ đây, biểu đồ hiển thị dữ liệu bán hàng thực tế của chúng tôi từ danh sách SharePoint.

Làm cho biểu đồ tương tác với danh sách thả xuống 

Chúng ta có thể cải thiện ứng dụng của mình hơn nữa bằng cách cho phép người quản lý chọn một tháng từ danh sách thả xuống và cập nhật biểu đồ để phản ánh dữ liệu bán hàng của tháng đó. Đặt một điều khiển dropdown mới phía trên biểu đồ và gắn nhãn với nội dung “Chọn tháng”.

Sử dụng mã này trong thuộc tính Mục của trình đơn thả xuống để nhận danh sách các tháng/năm duy nhất có dữ liệu bán hàng từ danh sách SharePoint Doanh số hàng tháng .

Distinct(‘Monthly Sales’, Period) 

Hiện tại, danh sách SharePoint của chúng tôi chỉ chứa dữ liệu cho tháng 9 năm 2021. Thêm dữ liệu này cho tháng 10 năm 2021 và tháng 11 năm 2021, sau đó làm mới nguồn dữ liệu trong Power Apps. Hiện tại, tháng 9 năm 2021, tháng 10 năm 2021 và tháng 11 năm 2021 sẽ xuất hiện trong danh sách thả xuống.

Cập nhật thuộc tính Hình ảnh của hình ảnh biểu đồ bằng mã này. Chúng ta có thể sử dụng chức năng Bộ lọc để chỉ chọn dữ liệu bán hàng thuộc về tháng/năm đã chọn trong danh sách thả xuống.

 “https://quickchart.io/chart?c=”&EncodeUrl(“{

‘type’: ‘horizontalBar’,
‘data’: {
     ‘labels’: [“&Concat(
         Filter(‘Monthly Sales’, Period=drp_Month.Selected.Result),
         “‘”&Salesperson&“‘,”
     )&”],
     ‘datasets’: [
         {
             ‘label’: ‘Dataset 2‘,
             ‘backgroundColor’: ‘rgba(54, 162, 235, 0.5)’,
             ‘borderColor’: ‘rgb(54, 162, 235)’,
             ‘borderWidth’: 1,
             ‘data’: [“&Concat(
         Filter(‘Monthly Sales’, Period=drp_Month.Selected.Result),
         “‘”&SalesAmount&“‘,”
     )&”]
         }
     ]},
     ‘options’: {
         ‘elements’: {
         ‘rectangle’: {
             ‘borderWidth’: 2
         }
         },
         ‘responsive’: true,
         ‘legend’: {
         ‘display’: false
         },
         ‘title’: {
         ‘display’: true,
         ‘text’: ‘Sales Amount by Salesperson’
         }
     }
}”
) 

Giờ đây, biểu đồ có thể được kiểm soát bằng trình đơn thả xuống để hiển thị dữ liệu cho một tháng đã chọn.

Sưu tầm và dịch.