Uncategorized

Tự tạo biểu đồ box plot trong power bi với Node.js

Posted on by TokTips

Để tạo một biểu đồ Box Plot trong Power BI với tệp .pbiviz, bạn sẽ cần sử dụng Power BI Visual Tools (PBIVIZ) và D3.js (hoặc Plotly.js) để xây dựng biểu đồ tùy chỉnh. Dưới đây là hướng dẫn chi tiết từng bước để tạo một custom visual dạng Box Plot cho Power BI.

Các Bước Chuẩn Bị

  1. Cài đặt Node.js: Nếu chưa cài đặt, hãy tải và cài đặt Node.js.
  2. Cài đặt Power BI Visual Tools (PBIVIZ):
    • Mở Command Prompt hoặc Terminal và chạy lệnh sau để cài đặt:npm install -g powerbi-visuals-tools
  3. Tạo thư mục dự án cho visual của bạn (ví dụ BoxPlotVisual) và khởi tạo visual mới trong thư mục này.

Bước 1: Khởi Tạo Dự Án Box Plot

  1. Khởi tạo dự án: Mở Command Prompt hoặc Terminal và chạy lệnh sau để tạo một visual mới:pbiviz new BoxPlotVisual
  2. Chuyển vào thư mục dự án mới tạo:cd BoxPlotVisual

Bước 2: Cấu Hình và Phát Triển Box Plot

  1. Chỉnh sửa file cấu hình pbiviz.json:
    • Mở tệp pbiviz.json trong thư mục BoxPlotVisual.
    • Thay đổi các thuộc tính như displayName và description để mô tả visual của bạn.
    • Đảm bảo apiVersion là phiên bản mới nhất hỗ trợ Power BI.
  2. Cài đặt thư viện D3 hoặc Plotly (thường dùng để tạo biểu đồ box plot):npm install d3 Hoặc nếu bạn sử dụng Plotly:npm install plotly.js

Bước 3: Chỉnh Sửa Mã Nguồn Trong visual.ts

Mở file visual.ts trong thư mục src. Đây là nơi bạn sẽ viết mã TypeScript để tạo Box Plot.

Nhập thư viện D3 hoặc Plotly vào visual.ts: import * as d3 from 'd3'; // Hoặc nếu dùng Plotly: import * as Plotly from 'plotly.js-dist';

Xử lý dữ liệu:

Viết hàm để xử lý dữ liệu từ Power BI và chuyển nó thành định dạng phù hợp cho Box Plot. Ví dụ, chuyển dữ liệu thành các nhóm cho từng giá trị phân loại.

import * as d3 from "d3";

function processDataForBoxPlot(data: { Category: string; Value: number }[]) {
// Nhóm dữ liệu theo Category
const groupedData = d3.group(data, d => d.Category);

// Tạo một mảng để chứa dữ liệu theo định dạng cho Box Plot
const boxPlotData = Array.from(groupedData, ([key, values]) => {
    const sortedValues = values.map(d => d.Value).sort(d3.ascending);

    // Tính toán các thông số cho Box Plot
    const q1 = d3.quantile(sortedValues, 0.25);
    const median = d3.quantile(sortedValues, 0.5);
    const q3 = d3.quantile(sortedValues, 0.75);
    const interQuantileRange = q3 - q1;
    const min = d3.min(sortedValues);
    const max = d3.max(sortedValues);

    // Tìm các giá trị ngoại lệ
    const lowerFence = q1 - 1.5 * interQuantileRange;
    const upperFence = q3 + 1.5 * interQuantileRange;
    const outliers = sortedValues.filter(v => v < lowerFence || v > upperFence);

    return {
        category: key,
        q1: q1,
        median: median,
        q3: q3,
        min: min,
        max: max,
        outliers: outliers
    };
});

return boxPlotData;

}

Giải thích hàm processDataForBoxPlot

  • Nhóm dữ liệu: Dùng d3.group để nhóm dữ liệu theo Category, cho phép mỗi Category có một tập hợp các giá trị Value.
  • Tính toán các thống kê Box Plot:
    • q1: Tứ phân vị thứ nhất, bằng 25% của dữ liệu.
    • median: Trung vị (tứ phân vị thứ hai, 50%).
    • q3: Tứ phân vị thứ ba, 75% của dữ liệu.
    • interQuantileRange (IQR): Đoạn cách giữa tứ phân vị thứ ba và tứ phân vị thứ nhất, giúp xác định các giá trị ngoại lệ.
    • min và max: Giá trị nhỏ nhất và lớn nhất trong tập dữ liệu.
  • Tính toán giá trị ngoại lệ:
    • Sử dụng công thức lowerFence = q1 - 1.5 * IQR và upperFence = q3 + 1.5 * IQR để xác định các giá trị nằm ngoài phạm vi bình thường.
    • Các giá trị nằm dưới lowerFence hoặc trên upperFence được coi là ngoại lệ và lưu vào outliers.
  • Trả về dữ liệu Box Plot: Kết quả cuối cùng là một mảng các đối tượng chứa các thông tin cần thiết cho Box Plot, bao gồm category, q1, median, q3, min, max, và outliers.

Vẽ Box Plot:

Nếu bạn dùng D3.js, hãy sử dụng D3 để tạo Box Plot từ dữ liệu đã xử lý. Dưới đây là ví dụ mã cơ bản:

// Thêm hàm vẽ box plot vào hàm update của visual public

update(options: VisualUpdateOptions) {

// Lấy dữ liệu và xử lý thành định dạng phù hợp

const data = options.dataViews[0].table.rows;

// Xóa nội dung cũ của visual d3.select(this.target).selectAll("*").remove();

// Tạo box plot từ dữ liệu

// Đoạn mã chi tiết sử dụng D3 để tạo Box Plot tùy thuộc vào dữ liệu

}

Nếu bạn dùng Plotly, đoạn mã dưới đây sẽ giúp bạn tạo Box Plot dễ dàng:

public update(options: VisualUpdateOptions) {
const data = [
{
y: [1, 2, 3, 4, 5], // Dữ liệu ví dụ, hãy thay bằng dữ liệu thật từ Power BI
type: 'box'
}
];

const layout = {
title: 'Box Plot Example',
yaxis: { title: 'Values' }
};

Plotly.newPlot(this.target, data, layout);

}

Bước 4: Vẽ Box Plot Với D3.js
Trong hàm drawBoxPlot, bạn có thể sử dụng D3.js để vẽ Box Plot dựa trên boxPlotData.

private drawBoxPlot(boxPlotData) {
    const svg = d3.select(this.target)
        .append("svg")
        .attr("width", 500)
        .attr("height", 300);

    const xScale = d3.scaleBand()
        .domain(boxPlotData.map(d => d.category))
        .range([50, 450])
        .padding(0.2);

    const yScale = d3.scaleLinear()
        .domain([0, d3.max(boxPlotData, d => d.max)])
        .nice()
        .range([250, 50]);

    // Vẽ các hộp và các đường trong Box Plot
    boxPlotData.forEach(d => {
        const g = svg.append("g")
            .attr("transform", `translate(${xScale(d.category)}, 0)`);

        // Vẽ đường trung vị
        g.append("line")
            .attr("y1", yScale(d.median))
            .attr("y2", yScale(d.median))
            .attr("x1", -10)
            .attr("x2", 10)
            .attr("stroke", "black");

        // Vẽ hình chữ nhật (box) giữa q1 và q3
        g.append("rect")
            .attr("y", yScale(d.q3))
            .attr("height", yScale(d.q1) - yScale(d.q3))
            .attr("width", 20)
            .attr("fill", "skyblue");

        // Vẽ đường min-max
        g.append("line")
            .attr("y1", yScale(d.min))
            .attr("y2", yScale(d.max))
            .attr("stroke", "black");

        // Vẽ các điểm ngoại lệ
        d.outliers.forEach(outlier => {
            g.append("circle")
                .attr("cy", yScale(outlier))
                .attr("r", 3)
                .attr("fill", "red");
        });
    });
}
.

Tổng Kết
Hàm processDataForBoxPlot xử lý dữ liệu từ Power BI, chuyển nó thành các chỉ số phù hợp cho Box Plot.
Hàm drawBoxPlot vẽ Box Plot bằng D3.js dựa trên dữ liệu đã xử lý.
Chạy thử nghiệm visual và kiểm tra kết quả hiển thị Box Plot.
Với các bước trên, bạn có thể tạo thành công một Box Plot tùy chỉnh trong Power BI bằng D3.js và Power BI Visual Tools

Chạy thử visual:

Để kiểm tra visual, bạn có thể chạy lệnh sau:bashSao chép mãpbiviz start

Sau đó, mở Power BI Desktop, bật Developer Mode (trong phần Options > Security) và kết nối tới server để kiểm tra visual.

Bước 4: Đóng Gói Visual Thành Tệp .pbiviz

  1. Sau khi hoàn tất phát triển và thử nghiệm, đóng gói custom visual thành tệp .pbiviz bằng lệnh:bashSao chép mãpbiviz package
  2. Tệp .pbiviz sẽ được tạo trong thư mục dist của dự án. Tệp này có thể được import vào Power BI Desktop hoặc Power BI Service.

Bước 5: Import Tệp .pbiviz Vào Power BI

  1. Mở Power BI Desktop và mở báo cáo mà bạn muốn thêm Box Plot.
  2. Trong phần Visualizations, chọn biểu tượng dấu ba chấm ... > Import a visual from a file.
  3. Chọn tệp .pbiviz bạn vừa đóng gói để thêm visual vào báo cáo.
  4. Sử dụng Box Plot bằng cách kéo dữ liệu cần thiết vào visual.

Lưu Ý Khi Phát Triển Box Plot Custom Visual

  • Kiểm tra cẩn thận dữ liệu đầu vào: Đảm bảo dữ liệu đầu vào từ Power BI đã được xử lý đúng trước khi truyền vào D3 hoặc Plotly.
  • Sử dụng các thư viện vẽ biểu đồ thích hợp: D3.js phù hợp cho các yêu cầu tùy chỉnh phức tạp, còn Plotly.js dễ sử dụng hơn nếu bạn muốn tạo các biểu đồ nhanh và không cần nhiều tuỳ chỉnh.
  • Kiểm tra trên nhiều nguồn dữ liệu để đảm bảo visual hoạt động chính xác với các bộ dữ liệu khác nhau.

Với các bước trên, bạn có thể tạo thành công một custom visual dạng Box Plot cho Power BI, đóng gói thành tệp .pbiviz và sử dụng hoặc chia sẻ dễ dàng trong Power BI.

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 *