เพิ่มการโต้ตอบลงในวิชวลด้วยการเลือกวิชวล Power BI

Power BI มีสองวิธีในการโต้ตอบกับวิชวล - การเลือกและการกรอง ตัวอย่างต่อไปนี้สาธิตวิธีการเลือกรายการจากวิชวลหนึ่ง และแจ้งวิชวลอื่น ๆ ในรายงานเกี่ยวกับสถานะตัวเลือกใหม่

อินเทอร์เฟซสอดคล้องกับวัตถุ Selection :

export interface ISelectionId {
    equals(other: ISelectionId): boolean;
    includes(other: ISelectionId, ignoreHighlight?: boolean): boolean;
    getKey(): string;
    getSelector(): Selector;
    getSelectorsByColumn(): SelectorsByColumn;
    hasIdentity(): boolean;
}

ใช้ตัวจัดการการเลือกเพื่อเลือกจุดข้อมูล

วัตถุโฮสต์วิชวลมีเมธอดสําหรับ การสร้างอินสแตนซ์ของตัวจัดการการเลือก ตัวจัดการการเลือกมีเมธอดที่สอดคล้องกันสําหรับแต่ละการดําเนินการต่อไปนี้:

• เลือก …
• ล้างส่วนที่เลือก
• แสดงเมนูบริบท
• จัดเก็บการเลือกปัจจุบัน
• ตรวจสอบสถานะการเลือก

สร้างอินสแตนซ์ของตัวจัดการการเลือก

หากต้องการใช้ตัวจัดการการเลือก ให้สร้างอินสแตนซ์ของตัวจัดการการเลือก โดยทั่วไป วิชวลจะสร้างอินสแตนซ์ constructor ตัวจัดการการเลือกในส่วน ของวัตถุวิชวล

export class Visual implements IVisual {
    private target: HTMLElement;
    private host: IVisualHost;
    private selectionManager: ISelectionManager;
    // ...
    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        // ...
        this.selectionManager = this.host.createSelectionManager();
    }
    // ...
}

สร้างอินสแตนซ์ของตัวสร้างการเลือก

เมื่อมีการสร้างอินสแตนซ์ตัวจัดการการเลือก คุณจะต้องสร้าง selections สําหรับแต่ละจุดข้อมูลของวิชวล วิธีการของ createSelectionIdBuilder วัตถุโฮสต์วิชวลจะสร้างการเลือกสําหรับแต่ละจุดข้อมูล วิธีนี้ส่งกลับอินสแตนซ์ของวัตถุที่มีอินเทอร์เฟซ powerbi.visuals.ISelectionIdBuilder:

export interface ISelectionIdBuilder {
    withCategory(categoryColumn: DataViewCategoryColumn, index: number): this;
    withSeries(seriesColumn: DataViewValueColumns, valueColumn: DataViewValueColumn | DataViewValueColumnGroup): this;
    withMeasure(measureId: string): this;
    withMatrixNode(matrixNode: DataViewMatrixNode, levels: DataViewHierarchyLevel[]): this;
    withTable(table: DataViewTable, rowIndex: number): this;
    createSelectionId(): ISelectionId;
}

วัตถุนี้มีวิธีการที่สอดคล้องเพื่อสร้างสําหรับการ selections แมปมุมมองข้อมูลชนิดต่าง ๆ

หมายเหตุ

มีการนําวิธีการ withTable และ withMatrixNode มาใช้ใน API 2.5.0 ของวิชวล Power BI ถ้าคุณจําเป็นต้องใช้ตัวเลือกสําหรับการแมปมุมมองข้อมูลแบบตารางหรือเมทริกซ์ ให้อัปเดตเป็น API เวอร์ชัน 2.5.0 หรือใหม่กว่า

สร้างการเลือกสําหรับการแมปมุมมองข้อมูลจัดกลุ่ม

มาดูกันว่าการเลือกแสดงการแมปมุมมองข้อมูลจัดกลุ่มสําหรับแบบจําลองความหมายตัวอย่างอย่างไร:

ผู้ผลิต	ขนิด	ค่า
Chrysler	รถภายในประเทศ	28883
Chrysler	รถบรรทุกภายในประเทศ	117131
Chrysler	รถนําเข้า	0
Chrysler	รถบรรทุกนําเข้า	6362
Ford	รถภายในประเทศ	50032
Ford	รถบรรทุกภายในประเทศ	122446
Ford	รถนําเข้า	0
Ford	รถบรรทุกนําเข้า	0
กรัม	รถภายในประเทศ	65426
กรัม	รถบรรทุกภายในประเทศ	138122
กรัม	รถนําเข้า	197
กรัม	รถบรรทุกนําเข้า	0
ฮอนด้า	รถภายในประเทศ	51450
ฮอนด้า	รถบรรทุกภายในประเทศ	46115
ฮอนด้า	รถนําเข้า	2932
ฮอนด้า	รถบรรทุกนําเข้า	0
นิสสัน	รถภายในประเทศ	51476
นิสสัน	รถบรรทุกภายในประเทศ	47343
นิสสัน	รถนําเข้า	5485
นิสสัน	รถบรรทุกนําเข้า	1430
Toyota	รถภายในประเทศ	55643
Toyota	รถบรรทุกภายในประเทศ	61227
Toyota	รถนําเข้า	20799
Toyota	รถบรรทุกนําเข้า	23614

วิชวลใช้การแมปมุมมองข้อมูลต่อไปนี้:

{
    "dataRoles": [
        {
            "displayName": "Columns",
            "name": "columns",
            "kind": "Grouping"
        },
        {
            "displayName": "Rows",
            "name": "rows",
            "kind": "Grouping"
        },
        {
            "displayName": "Values",
            "name": "values",
            "kind": "Measure"
        }
    ],
    "dataViewMappings": [
        {
            "categorical": {
                "categories": {
                    "for": {
                        "in": "columns"
                    }
                },
                "values": {
                    "group": {
                        "by": "rows",
                        "select": [
                            {
                                "for": {
                                    "in": "values"
                                }
                            }
                        ]
                    }
                }
            }
        }
    ]
}

ในตัวอย่างManufacturerก่อนหน้า คือ columns และ Type คือrows ชุดข้อมูลจะถูกสร้างขึ้นโดยการจัดกลุ่มค่าตาม rows (Type)

วิชวลควรสามารถแบ่งข้อมูลตาม Manufacturer หรือType

ตัวอย่างเช่น ถ้าผู้ใช้เลือก Chrysler โดย Manufacturerวิชวลอื่น ๆ ควรแสดงข้อมูลต่อไปนี้:

ผู้ผลิต	ขนิด	ค่า
Chrysler	รถภายในประเทศ	28883
Chrysler	รถบรรทุกภายในประเทศ	117131
Chrysler	รถนําเข้า	0
Chrysler	รถบรรทุกนําเข้า	6362

เมื่อผู้ใช้เลือก Import Car โดย Type (เลือกข้อมูลตามชุดข้อมูล) วิชวลอื่น ๆ ควรแสดงข้อมูลต่อไปนี้:

ผู้ผลิต	ขนิด	ค่า
Chrysler	รถนําเข้า	0
Ford	รถนําเข้า	0
กรัม	รถนําเข้า	197
ฮอนด้า	รถนําเข้า	2932
นิสสัน	รถนําเข้า	5485
Toyota	รถนําเข้า	20799

เมื่อต้องการแสดงข้อมูลแบ่งส่วน ให้เติมตะกร้าข้อมูลของวิชวลดังนี้:

ในตัวอย่าง Manufacturer ก่อนหน้า คือประเภท (คอลัมน์) Type เป็นชุดข้อมูล (แถว) และ Sales สําหรับ Values ชุดข้อมูล

หมายเหตุ

Values จําเป็นต้องมีสําหรับการแสดงชุดข้อมูลเนื่องจากตามการแมป Values มุมมองข้อมูลจะถูกจัดกลุ่มตาม Rows ข้อมูล

สร้างการเลือกสําหรับประเภท

// categories
const categories = dataView.categorical.categories;

// create label for 'Manufacturer' column
const p = document.createElement("p") as HTMLParagraphElement;
p.innerText = categories[0].source.displayName.toString();
this.target.appendChild(p);

// get count of category elements
const categoriesCount = categories[0].values.length;

// iterate all categories to generate selection and create button elements to use selections
for (let categoryIndex = 0; categoryIndex < categoriesCount; categoryIndex++) {
    const categoryValue: powerbi.PrimitiveValue = categories[0].values[categoryIndex];

    const categorySelectionId = this.host.createSelectionIdBuilder()
        .withCategory(categories[0], categoryIndex) // we have only one category (only one `Manufacturer` column)
        .createSelectionId();
    this.dataPoints.push({
        value: categoryValue,
        selection: categorySelectionId
    });
    console.log(categorySelectionId);

    // create button element to apply selection on click
    const button = document.createElement("button") as HTMLButtonElement;
    button.value = categoryValue.toString();
    button.innerText = categoryValue.toString();
    button.addEventListener("click", () => {
        // handle click event to apply correspond selection
        this.selectionManager.select(categorySelectionId);
    });
    this.target.appendChild(button);
}

ในโค้ดตัวอย่างก่อนหน้านี้ เราทําซ้ําในทุกหมวดหมู่ ในการวนซ้ําแต่ละครั้ง เราเรียกใช้ createSelectionIdBuilder เพื่อสร้างการเลือกถัดไปสําหรับแต่ละหมวดหมู่โดยการเรียก withCategory เมธอด ของตัวสร้างการเลือก เมcreateSelectionIdธอด ถูกใช้เป็นเมธอดสุดท้ายในการส่งคืนออบเจ็กต์ที่สร้างขึ้นselection

ใน withCategory วิธีการ เราส่งผ่านคอลัมน์ของ categoryในตัวอย่าง Manufacturerและดัชนีขององค์ประกอบประเภท

สร้างการเลือกสําหรับชุดข้อมูล

// get groupped values for series
const series: powerbi.DataViewValueColumnGroup[] = dataView.categorical.values.grouped();

// create label for 'Type' column
const p2 = document.createElement("p") as HTMLParagraphElement;
p2.innerText = dataView.categorical.values.source.displayName;
this.target.appendChild(p2);

// iterate all series to generate selection and create button elements to use selections
series.forEach( (ser: powerbi.DataViewValueColumnGroup) => {
    // create selection id for series
    const seriesSelectionId = this.host.createSelectionIdBuilder()
        .withSeries(dataView.categorical.values, ser)
        .createSelectionId();

    this.dataPoints.push({
        value: ser.name,
        selection: seriesSelectionId
    });

    // create button element to apply selection on click
    const button = document.createElement("button") as HTMLButtonElement;
    button.value =ser.name.toString();
    button.innerText = ser.name.toString();
    button.addEventListener("click", () => {
        // handle click event to apply correspond selection
        this.selectionManager.select(seriesSelectionId);
    });
    this.target.appendChild(button);
});

สร้างการเลือกสําหรับการแมปมุมมองข้อมูลตาราง

ตัวอย่างต่อไปนี้แสดงการแมปมุมมองข้อมูลแบบตาราง:

{
    "dataRoles": [
        {
            "displayName": "Values",
            "name": "values",
            "kind": "GroupingOrMeasure"
        }
    ],
    "dataViewMappings": [
        {
            "table": {
                "rows": {
                    "for": {
                        "in": "values"
                    }
                }
            }
        }
    ]
}

หากต้องการสร้างการเลือกสําหรับการแมปมุมมองข้อมูลแบบตารางแต่ละแถว ให้ withTable เรียกใช้วิธีการ ของตัวสร้างการเลือก

public update(options: VisualUpdateOptions) {
    const dataView = options.dataViews[0];
    dataView.table.rows.forEach((row: DataViewTableRow, rowIndex: number) => {
        this.target.appendChild(rowDiv);
        const selection: ISelectionId = this.host.createSelectionIdBuilder()
            .withTable(dataView.table, rowIndex)
            .createSelectionId();
    }
}

โค้ดของวิชวลจะวนใหม่แถวของตารางและแต่ละแถวเรียก withTable วิธีการ ตาราง พารามิเตอร์ของ withTable วิธีการ คือ table ออบเจ็กต์และดัชนีของแถวตาราง

สร้างการเลือกสําหรับการแมปมุมมองข้อมูลแบบเมทริกซ์

public update(options: VisualUpdateOptions) {
    const host = this.host;
    const rowLevels: powerbi.DataViewHierarchyLevel[] = dataView.matrix.rows.levels;
    const columnLevels: powerbi.DataViewHierarchyLevel[] = dataView.matrix.rows.levels;

    // iterate rows hierarchy
    nodeWalker(dataView.matrix.rows.root, rowLevels);
    // iterate columns hierarchy
    nodeWalker(dataView.matrix.columns.root, columnLevels);

    function nodeWalker(node: powerbi.DataViewMatrixNode, levels: powerbi.DataViewHierarchyLevel[]) {
        const nodeSelection = host.createSelectionIdBuilder().withMatrixNode(node, levels);

        if (node.children && node.children.length) {
            node.children.forEach(child => {
                nodeWalker(child, levels);
            });
        }
    }
}

ในตัวอย่าง nodeWalker เรียกใช้ซ้ําแต่ละโหนดและโหนดย่อย

nodeWalker สร้าง nodeSelection วัตถุในการโทรแต่ละครั้ง แต่ละรายการ nodeSelection แสดงถึง selection โหนดที่สอดคล้องกัน

เลือกจุดข้อมูลเพื่อแบ่งภาพอื่น ๆ

ในตัวอย่างนี้ เราได้สร้างตัวจัดการการคลิกสําหรับองค์ประกอบปุ่ม ตัวจัดการเรียก select เมธอด ของตัวจัดการการเลือกและส่งผ่านวัตถุการเลือก

button.addEventListener("click", () => {
    // handle click event to apply correspond selection
    this.selectionManager.select(categorySelectionId);
});

อินเทอร์เฟซของ select วิธีการ:

interface ISelectionManager {
    // ...
    select(selectionId: ISelectionId | ISelectionId[], multiSelect?: boolean): IPromise<ISelectionId[]>;
    // ...
}

เม select ธอด สามารถยอมรับอาร์เรย์ของการเลือกได้ ซึ่งทําให้วิชวลของคุณมีจุดข้อมูลหลายจุดที่เลือกในครั้งเดียว พารามิเตอร์ multiSelectที่สอง จะรับผิดชอบสําหรับการเลือกหลายรายการ ถ้า multiSelect เป็นจริง Power BI จะไม่ล้างสถานะการเลือกก่อนหน้าเมื่อมีการใช้การเลือกปัจจุบัน ถ้าค่าเป็น false การเลือกก่อนหน้านี้จะถูกเขียนทับ

ตัวอย่างทั่วไปของการใช้ multiSelect คือการจัดการสถานะของ ปุ่ม Ctrl ในการคลิกเหตุการณ์ เมื่อปุ่ม Ctrl ค้างไว้ คุณสามารถเลือกวัตถุมากกว่าหนึ่งรายการได้

button.addEventListener("click", (mouseEvent) => {
    const multiSelect = (mouseEvent as MouseEvent).ctrlKey;
    this.selectionManager.select(seriesSelectionId, multiSelect);
});

เนื้อหาที่เกี่ยวข้อง

จัดการการเลือกเมื่อสลับบุ๊กมาร์ก

เพิ่มเมนูบริบทสําหรับจุดข้อมูลวิชวล

เพิ่มการเลือกลงในวิชวล Power BI