Uncategorized

Tự tạo một visual mới trong Power Bi từ Node.js

Posted on by TokTips

Dưới đây là hướng dẫn từng bước để tạo một custom visual đơn giản dưới dạng tệp .pbiviz trong Power BI. Trong ví dụ này, chúng ta sẽ tạo một biểu đồ vòng tròn đơn giản (Circular Chart), hiển thị một giá trị phần trăm dưới dạng hình tròn để trực quan hóa phần trăm hoàn thành.

Yêu cầu

  1. Node.js: Đảm bảo bạn đã cài đặt Node.js (bao gồm cả NPM) trên máy tính.
    • Tải từ: https://nodejs.org/.
    • Sau khi cài đặt, kiểm tra phiên bản bằng cách mở Terminal (hoặc Command Prompt) và chạy lệnh:bashSao chép mãnode -v npm -v
  2. Power BI Visual Tools: Đây là công cụ chính để phát triển custom visual cho Power BI.
    • Cài đặt bằng lệnh:bashSao chép mãnpm install -g powerbi-visuals-tools

Bước 1: Khởi tạo dự án Custom Visual

  1. Mở Terminal hoặc Command Prompt.
  2. Chuyển đến thư mục bạn muốn tạo dự án.
  3. Khởi tạo một custom visual mới bằng lệnh:bashSao chép mãpbiviz new SimpleCircularChart
    • Thay SimpleCircularChart bằng tên bạn muốn. Power BI Visual Tools sẽ tạo thư mục dự án với cấu trúc cần thiết cho custom visual.
  4. Chuyển đến thư mục dự án:bashSao chép mãcd SimpleCircularChart

Bước 2: Cấu hình dự án Custom Visual

  1. Mở dự án trong trình soạn thảo mã (như Visual Studio Code).
  2. Tìm tệp pbiviz.json trong thư mục dự án và mở nó.
  3. Trong tệp này, bạn có thể chỉnh sửa một số thông tin về visual như:
    • displayName: Tên hiển thị của visual.
    • visualCapabilities: Định nghĩa các thuộc tính và trường mà visual sẽ hỗ trợ.

Bước 3: Phát triển Biểu đồ Vòng tròn Đơn giản

  1. Mở tệp visual.ts trong thư mục src. Đây là nơi bạn sẽ viết mã để tạo visual.
  2. Thay thế mã hiện có bằng mã sau để tạo một biểu đồ vòng tròn đơn giản:typescriptSao chép mãimport * as d3 from "d3"; import powerbi from "powerbi-visuals-api"; import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions; import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions; import IVisual = powerbi.extensibility.visual.IVisual; export class Visual implements IVisual { private svg: d3.Selection<SVGElement, any, any, any>; private circle: d3.Selection<SVGCircleElement, any, any, any>; constructor(options: VisualConstructorOptions) { // Tạo SVG cho biểu đồ this.svg = d3.select(options.element) .append('svg') .classed('circularChart', true); // Tạo vòng tròn this.circle = this.svg.append('circle'); } public update(options: VisualUpdateOptions) { const width = options.viewport.width; const height = options.viewport.height; const radius = Math.min(width, height) / 2; // Cập nhật kích thước SVG this.svg.attr('width', width).attr('height', height); // Lấy giá trị phần trăm từ dữ liệu (giả sử là giá trị đầu tiên trong trường dữ liệu) const dataView = options.dataViews[0]; const percentage = dataView.single ? <number>dataView.single.value : 0.5; // Mặc định là 50% // Cập nhật vòng tròn this.circle .attr('cx', width / 2) .attr('cy', height / 2) .attr('r', radius * percentage) // Tỉ lệ bán kính theo phần trăm .style('fill', 'steelblue'); // Màu sắc của vòng tròn } }

Giải thích mã:

  • SVG Element: Tạo phần tử SVG để chứa biểu đồ.
  • Circle: Vòng tròn sẽ biểu diễn phần trăm dưới dạng bán kính thay đổi.
  • update function: Hàm update sẽ lấy giá trị phần trăm từ dữ liệu và cập nhật bán kính của vòng tròn để phản ánh phần trăm này.

Bước 4: Khởi Động Máy Chủ Phát Triển và Thử Nghiệm

  1. Để chạy visual và kiểm tra, khởi động máy chủ phát triển bằng lệnh:bashSao chép mãpbiviz start
  2. Mở Power BI Desktop.
  3. Chọn File > Options and settings > Options > Security và bật Enable developer mode.
  4. Trong báo cáo Power BI, chọn From file để kết nối với visual của máy chủ đang chạy và thử nghiệm visual.

Bước 5: Đóng Gói Custom Visual thành .pbiviz

Khi hoàn tất phát triển và thử nghiệm, đóng gói custom visual bằng lệnh:

bashSao chép mãpbiviz package

Lệnh này sẽ tạo tệp .pbiviz trong thư mục dist của dự án, sẵn sàng để import vào Power BI.

Bước 6: Import .pbiviz vào Power BI

  1. Mở Power BI Desktop hoặc Power BI Service.
  2. Trong ngăn Visualizations, chọn biểu tượng ba chấm ... > Import a visual from a file.
  3. Chọn tệp .pbiviz vừa tạo để import visual vào Power BI.
  4. Visual tùy chỉnh của bạn sẽ xuất hiện trong ngăn Visualizations và có thể được kéo vào báo cáo để sử dụng.

Lưu ý:

  • Cấu hình dữ liệu: Đảm bảo rằng dữ liệu cung cấp cho visual có giá trị số phù hợp với cấu trúc dự án.
  • Chạy kiểm tra: Trước khi chia sẻ tệp .pbiviz, hãy kiểm tra kỹ để đảm bảo visual hoạt động tốt và không có lỗi.

Với hướng dẫn này, bạn có thể tạo một custom visual đơn giản cho Power BI, đóng gói thành tệp .pbiviz và sử dụng lại trong các báo cáo của mình.

TokTips

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *