Zvýraznění datových bodů ve vizuálech Power BIHighlight data points in Power BI Visuals

Ve výchozím nastavení se při výběru elementu v poli values v objektu dataView vyfiltrují pouze vybrané hodnoty.By default whenever an element is selected the values array in the dataView object will be filtered to just the selected values. To způsobí, že všechny ostatní vizuály na stránce zobrazí pouze vybraná data.It will cause all other visuals on the page to display just the selected data.

Výchozí chování objektu dataview při zvýraznění

Pokud vlastnost supportsHighlight v souboru capabilities.json nastavíte na true, zobrazí se úplné nefiltrované pole values spolu s polem highlights.If you set the supportsHighlight property in your capabilities.json to true, you'll receive the full unfiltered values array along with a highlights array. Pole highlights bude mít stejnou délku jako pole hodnot a všechny nevybrané hodnoty se nastaví na null.The highlights array will be the same length as the values array and any non-selected values will be set to null. Když je tato vlastnost povolena, vizuál se postará o zvýraznění příslušných dat porovnáním pole values s polem highlights.With this property enabled it's the visual's responsibility to highlight the appropriate data by comparing the values array to the highlights array.

Objekt dataview podporuje zvýraznění

V tomto příkladu si všimněte jednoho vybraného pruhu.In the example, you'll notice that 1 bar is selected. Jedná se o jedinou hodnotu v poli highlights.And it's the only value in the highlights array. Je také důležité poznamenat, že může existovat více výběrů a částečné zvýraznění.It's also important to note that there could be multiple selections and partial highlights. Zvýrazněné hodnoty se zobrazí v zobrazení dat.The highlighted values will be presented in the data view.

Poznámka

Mapování zobrazení dat tabulky nepodporuje funkci zvýraznění.Table data view mapping doesn't support the highlights feature.

Zvýrazňování datových bodů pomocí mapování zobrazení dat kategoriíHighlight data points with categorical data view mapping

Vizuály s mapováním zobrazení dat kategorií mají soubor capabilities.json s parametrem "supportsHighlight": true.The visuals with categorical data view mapping have capabilities.json with "supportsHighlight": true parameter. Příklad:For example:

{
    "dataRoles": [
        {
            "displayName": "Category",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Value",
            "name": "value",
            "kind": "Measure"
        }
    ],
    "dataViewMappings": [
        {
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    }
                },
                "values": {
                    "for": {
                        "in": "value"
                    }
                }
            }
        }
    ],
    "supportsHighlight": true
}

Výchozí zdrojový kód vizuálu po odebrání nepodstatného kódu bude vypadat takto:The default visual source code after removing unnecessary code will look like this:

"use strict";

// ... default imports list

import DataViewCategorical = powerbi.DataViewCategorical;
import DataViewCategoryColumn = powerbi.DataViewCategoryColumn;
import PrimitiveValue = powerbi.PrimitiveValue;
import DataViewValueColumn = powerbi.DataViewValueColumn;

import { VisualSettings } from "./settings";

export class Visual implements IVisual {
    private target: HTMLElement;
    private settings: VisualSettings;

    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.target = options.element;
        this.host = options.host;

    }

    public update(options: VisualUpdateOptions) {
        this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
        console.log('Visual update', options);

    }

    private static parseSettings(dataView: DataView): VisualSettings {
        return <VisualSettings>VisualSettings.parse(dataView);
    }

    /**
     * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
     * objects and properties you want to expose to the users in the property pane.
     *
     */
    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
        return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
    }
}

Import požadovaných rozhraní pro zpracování dat z Power BI:Import required interfaces to process data from Power BI:

import DataViewCategorical = powerbi.DataViewCategorical;
import DataViewCategoryColumn = powerbi.DataViewCategoryColumn;
import PrimitiveValue = powerbi.PrimitiveValue;
import DataViewValueColumn = powerbi.DataViewValueColumn;

Vytvoření kořenového elementu div pro hodnoty kategorií:Create root div element for category values:

export class Visual implements IVisual {
    private target: HTMLElement;
    private settings: VisualSettings;

    private div: HTMLDivElement; // new property

    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.target = options.element;
        this.host = options.host;

        // create div element
        this.div = document.createElement("div");
        this.div.classList.add("vertical");
        this.target.appendChild(this.div);

    }
    // ...
}

Vymazání obsahu elementů div před vykreslením nových dat:Clear content of div elements before rendering new data:

// ...
public update(options: VisualUpdateOptions) {
    this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
    console.log('Visual update', options);

    while (this.div.firstChild) {
        this.div.removeChild(this.div.firstChild);
    }
    // ...
}

Získání hodnot kategorií a měr z objektu dataView:Get categories and measure values from dataView object:

public update(options: VisualUpdateOptions) {
    this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
    console.log('Visual update', options);

    while (this.div.firstChild) {
        this.div.removeChild(this.div.firstChild);
    }

    const dataView: DataView = options.dataViews[0];
    const categoricalDataView: DataViewCategorical = dataView.categorical;
    const categories: DataViewCategoryColumn = categoricalDataView.categories[0];
    const categoryValues = categories.values;

    const measures: DataViewValueColumn = categoricalDataView.values[0];
    const measureValues = measures.values;
    const measureHighlights = measures.highlights;
    // ...
}

Kde categoryValues je pole hodnot kategorií, measureValues je pole měr a measureHighlights jsou zvýrazněné části hodnot.Where categoryValues is an array of category values, measureValues is an array of measures, and measureHighlights is highlighted parts of values.

Poznámka

Hodnoty vlastnosti measureHighlights mohou být menší než hodnoty vlastnosti categoryValues.Values of measureHighlights property can be less that values of categoryValues property. To znamená, že hodnota byla zvýrazněna částečně.In means that value was higlighted partially.

Vyčíslení pole categoryValues a získání odpovídajících hodnot a zvýraznění:Enumerate categoryValues array and get corresponding values and highlights:

// ...
const measureHighlights = measures.highlights;

categoryValues.forEach((category: PrimitiveValue, index: number) => {
    const measureValue = measureValues[index];
    const measureHighlight = measureHighlights && measureHighlights[index] ? measureHighlights[index] : null;
    console.log(category, measureValue, measureHighlight);

});

Vytvoření elementů div a p pro zobrazení a vizualizaci hodnot zobrazení dat v modelu DOM vizuálu:Create div and p elements to display and visualize data view values in visual DOM:

categoryValues.forEach((category: PrimitiveValue, index: number) => {
    const measureValue = measureValues[index];
    const measureHighlight = measureHighlights && measureHighlights[index] ? measureHighlights[index] : null;
    console.log(category, measureValue, measureHighlight);

    // div element. it contains elements to display values and visualize value as progress bar
    let div = document.createElement("div");
    div.classList.add("horizontal");
    this.div.appendChild(div);

    // div element to vizualize value of measure
    let barValue = document.createElement("div");
    barValue.style.width = +measureValue * 10 + "px";
    barValue.style.display = "flex";
    barValue.classList.add("value");

    // element to display category value
    let bp = document.createElement("p");
    bp.innerText = category.toString();

    // div element to vizualize highlight of measure
    let barHighlight = document.createElement("div");
    barHighlight.classList.add("highlight")
    barHighlight.style.backgroundColor = "blue";
    barHighlight.style.width = +measureHighlight * 10 + "px";

    // element to display highlighted value of measure
    let p = document.createElement("p");
    p.innerText = `${measureHighlight}/${measureValue}`;
    barHighlight.appendChild(bp);

    div.appendChild(barValue);

    barValue.appendChild(barHighlight);
    div.appendChild(p);
});

Použití požadovaných stylů pro elementy, které použijí flex box a definování barev pro elementy div:Apply required styles for elements to use flex box and define colors for div elements:

div.vertical {
    display: flex;
    flex-direction: column;
}

div.horizontal {
    display: flex;
    flex-direction: row;
}

div.highlight {
    background-color: blue
}

div.value {
    background-color: red;
    display: flex;
}

Ve výsledku byste měli mít následující zobrazení vizuálu.In the result, you should have the following view of the visual.

Vizuály s mapováním zobrazení dat kategorií a zvýrazněním

Zvýrazňování datových bodů pomocí mapování zobrazení maticových datHighlight data points with matrix data view mapping

Vizuály s mapováním zobrazení maticových dat mají soubor capabilities.json s parametrem "supportsHighlight": true.The visuals with matrix data view mapping have capabilities.json with "supportsHighlight": true parameter. Příklad:For example:

{
    "dataRoles": [
        {
            "displayName": "Columns",
            "name": "columns",
            "kind": "Grouping"
        },
        {
            "displayName": "Rows",
            "name": "rows",
            "kind": "Grouping"
        },
        {
            "displayName": "Value",
            "name": "value",
            "kind": "Measure"
        }
    ],
    "dataViewMappings": [
        {
            "matrix": {
                "columns": {
                    "for": {
                        "in": "columns"
                    }
                },
                "rows": {
                    "for": {
                        "in": "rows"
                    }
                },
                "values": {
                    "for": {
                        "in": "value"
                    }
                }
            }
        }
    ],
    "supportsHighlight": true
}

Vzorová data pro vytvoření hierarchie pro mapování zobrazení maticových dat:The sample data to create hierarchy for matrix data view mapping:

Řádek1Row1 Řádek2Row2 Řádek3Row3 Sloupec 1Column1 Sloupec 2Column2 Sloupec3Column3 HodnotyValues
R1R1 R11R11 R111R111 C1C1 C11C11 C111C111 11
R1R1 R11R11 R112R112 C1C1 C11C11 C112C112 22
R1R1 R11R11 R113R113 C1C1 C11C11 C113C113 33
R1R1 R12R12 R121R121 C1C1 C12C12 C121C121 44
R1R1 R12R12 R122R122 C1C1 C12C12 C122C122 55
R1R1 R12R12 R123R123 C1C1 C12C12 C123C123 66
R1R1 R13R13 R131R131 C1C1 C13C13 C131C131 77
R1R1 R13R13 R132R132 C1C1 C13C13 C132C132 88
R1R1 R13R13 R133R133 C1C1 C13C13 C133C133 99
R2R2 R21R21 R211R211 C2C2 C21C21 C211C211 1010
R2R2 R21R21 R212R212 C2C2 C21C21 C212C212 1111
R2R2 R21R21 R213R213 C2C2 C21C21 C213C213 1212
R2R2 R22R22 R221R221 C2C2 C22C22 C221C221 1313
R2R2 R22R22 R222R222 C2C2 C22C22 C222C222 1414
R2R2 R22R22 R223R223 C2C2 C22C22 C223C223 1616
R2R2 R23R23 R231R231 C2C2 C23C23 C231C231 1717
R2R2 R23R23 R232R232 C2C2 C23C23 C232C232 1818
R2R2 R23R23 R233R233 C2C2 C23C23 C233C233 1919

Vytvořte výchozí projekt vizuálu a použijte ukázku souboru capabilities.json.Create the default visual project and apply sample of capabilities.json.

Výchozí zdrojový kód vizuálu po odebrání nepodstatného kódu bude vypadat takto:Default visual source code after removing unessesray code will look:

"use strict";

// ... default imports

import { VisualSettings } from "./settings";

export class Visual implements IVisual {
    private target: HTMLElement;
    private settings: VisualSettings;


    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.target = options.element;
        this.host = options.host;
    }

    public update(options: VisualUpdateOptions) {
        this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
        console.log('Visual update', options);

    }

    private static parseSettings(dataView: DataView): VisualSettings {
        return <VisualSettings>VisualSettings.parse(dataView);
    }

    /**
     * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
     * objects and properties you want to expose to the users in the property pane.
     *
     */
    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
        return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
    }
}

Import požadovaných rozhraní pro zpracování dat z Power BI:Import required interfaces to process data from Power BI:

import DataViewMatrix = powerbi.DataViewMatrix;
import DataViewMatrixNode = powerbi.DataViewMatrixNode;
import DataViewHierarchyLevel = powerbi.DataViewHierarchyLevel;

Vytvoření dvou elementů div pro rozložení vizuálu:Create two div elements for visual layout:

constructor(options: VisualConstructorOptions) {
    // ...
    this.rowsDiv = document.createElement("div");
    this.target.appendChild(this.rowsDiv);

    this.colsDiv = document.createElement("div");
    this.target.appendChild(this.colsDiv);
    this.target.style.overflowY = "auto";
}

Kontrola dat v metodě update, aby bylo jisté, že vizuál získá data:Check the data in update method, to ensure that visual gets data:

public update(options: VisualUpdateOptions) {
    this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
    console.log('Visual update', options);

    const dataView: DataView = options.dataViews[0];
    const matrixDataView: DataViewMatrix = dataView.matrix;

    if (!matrixDataView ||
        !matrixDataView.columns ||
        !matrixDataView.rows ) {
        return
    }
    // ...
}

Vymazání obsahu elementů div před vykreslením nových dat:Clear content of div elements before render new data:

public update(options: VisualUpdateOptions) {
    // ...

    // remove old elements
    // to better performance use D3js pattern:
    // https://d3js.org/#enter-exit
    while (this.rowsDiv.firstChild) {
        this.rowsDiv.removeChild(this.rowsDiv.firstChild);
    }
    const prow = document.createElement("p");
    prow.innerText = "Rows";
    this.rowsDiv.appendChild(prow);

    while (this.colsDiv.firstChild) {
        this.colsDiv.removeChild(this.colsDiv.firstChild);
    }
    const pcol = document.createElement("p");
    pcol.innerText = "Columns";
    this.colsDiv.appendChild(pcol);
    // ...
}

Vytvoření funkce treeWalker pro traverzování datové struktury matice:Create treeWalker function to traverse matrix data structure:

public update(options: VisualUpdateOptions) {
    // ...
    const treeWalker = (matrixNode: DataViewMatrixNode, index: number, levels: DataViewHierarchyLevel[], div: HTMLDivElement)  => {

    }
    // ...
}

Kde matrixNode je aktuální uzel, levels jsou sloupce metadat této úrovně hierarchie, div je nadřazený element pro podřízené elementy HTML.Where matrixNode is the current node, levels is metadata columns of this hierarchy level, div - parent element for child HTML elements.

treeWalker je rekurzivní funkce nutná k vytvoření elementu div a p pro text hlavičky a volání funkce pro podřízené elementy uzlu:The treeWalker is recursive function, need to create div element and p for text as header, and call the function for child elements of node:

public update(options: VisualUpdateOptions) {
    // ...
    const treeWalker = (matrixNode: DataViewMatrixNode, index: number, levels: DataViewHierarchyLevel[], div: HTMLDivElement)  => {
        // ...

        if (matrixNode.children) {
            const childDiv = document.createElement("div");
            childDiv.classList.add("vertical");
            div.appendChild(childDiv);

            const p = document.createElement("p");
            const level = levels[matrixNode.level]; // get current level column metadata from current node
            p.innerText = level.sources[level.sources.length - 1].displayName; // get column name from metadata

            childDiv.appendChild(p); // add paragraph element to div element
            matrixNode.children.forEach((node, index) => treeWalker(node, levels, childDiv, ++levelIndex));
        }
    }
    // ...
}

Volání funkce pro kořenové prvky sloupce a řádku struktury zobrazení maticových dat:Call the function for root elements of column and row of matrix data view structure:

public update(options: VisualUpdateOptions) {
    // ...
    const treeWalker = (matrixNode: DataViewMatrixNode, index: number, levels: DataViewHierarchyLevel[], div: HTMLDivElement)  => {
        // ...
    }
    // ...
    // remove old elements
    // ...

    // ...
    const rowRoot: DataViewMatrixNode = matrixDataView.rows.root;
    rowRoot.children.forEach((node) => treeWalker(node, matrixDataView.rows.levels, this.rowsDiv));

    const colRoot = matrixDataView.columns.root;
    colRoot.children.forEach((node) => treeWalker(node, matrixDataView.columns.levels, this.colsDiv));
}

Vygenerování selectionID pro uzly a vytvoření tlačítek pro zobrazení uzlů:Generate selectionID for nodes and Create buttons to display nodes:

public update(options: VisualUpdateOptions) {
    // ...
    const treeWalker = (matrixNode: DataViewMatrixNode, index: number, levels: DataViewHierarchyLevel[], div: HTMLDivElement)  => {
        const selectionID: ISelectionID = this.host.createSelectionIdBuilder()
            .withMatrixNode(matrixNode, levels)
            .createSelectionId();

        let nodeBlock = document.createElement("button");
        nodeBlock.innerText = matrixNode.value.toString();

        nodeBlock.addEventListener("click", (event) => {
            // call select method in the selection manager
            this.selectionManager.select(selectionID);
        });

        nodeBlock.addEventListener("contextmenu", (event) => {
            // call showContextMenu method to display context menu on the visual
            this.selectionManager.showContextMenu(selectionID, {
                x: event.clientX,
                y: event.clientY
            });
            event.preventDefault();
        });
        // ...
    }
    // ...
}

Hlavním krokem při použití zvýraznění je zpracování dalšího pole hodnot.The main step of using highlighting is to process additional array of values.

Když se podíváte na objekt koncového uzlu, vidíte, že pole hodnot má dvě vlastnosti – value a highlight:If you inspect the object of terminal node, you can see that the values array has two properties - value and highlight:

JSON.stringify(options.dataViews[0].matrix.rows.root.children[0].children[0].children[0], null, " ");
{
 "level": 2,
 "levelValues": [
  {
   "value": "R233",
   "levelSourceIndex": 0
  }
 ],
 "value": "R233",
 "identity": {
  "identityIndex": 2
 },
 "values": {
  "0": {
   "value": null,
   "highlight": null
  },
  "1": {
   "value": 19,
   "highlight": 19
  }
 }
}

Kde vlastnost value představuje hodnotu uzlu bez použití výběru z jiného vizuálu a vlastnost highlight indikuje, která část dat byla zvýrazněna.Where value property represents value of node without applying a selection from other visual, and highlight property indicates which part of data was highlighted.

Poznámka

Hodnota vlastnosti highlight může být menší než hodnota vlastnosti value.Value of highlight property can be less that value of value property. To znamená, že hodnota byla zvýrazněna částečně.In means that value was higlighted partially.

Přidání kódu pro zpracování pole values uzlu, pokud je zobrazený:Add the code to process the values array of node if it is presented:

public update(options: VisualUpdateOptions) {
    // ...
    const treeWalker = (matrixNode: DataViewMatrixNode, index: number, levels: DataViewHierarchyLevel[], div: HTMLDivElement)  => {
        // ...

        if (matrixNode.values) {
            const sumOfValues = Object.keys(matrixNode.values) // get key property of object (value are 0 to N)
                .map(key => +matrixNode.values[key].value) // convert key property to number
                .reduce((prev, curr) => prev + curr) // sum of values

            let sumOfHighlights = sumOfValues;
            sumOfHighlights = Object.keys(matrixNode.values) // get key property of object (value are 0 to N)
                .map(key => matrixNode.values[key].highlight ? +matrixNode.values[key].highlight : null ) // convert key property to number if it exists
                .reduce((prev, curr) => curr ? prev + curr : null) // convert key property to number

            // create div container for value and highlighted value
            const vals = document.createElement("div");
            vals.classList.add("vertical")
            vals.classList.replace("vertical", "horizontal");
            // create paragraph element for label
            const highlighted = document.createElement("p");
            // Display complete value and highlighted value
            highlighted.innerText = `${sumOfHighlights}/${sumOfValues}`;

            // create div container for value
            const valueDiv = document.createElement("div");
            valueDiv.style.width = sumOfValues * 10 + "px";
            valueDiv.classList.add("value");

            // create div container for highlighted values
            const highlightsDiv = document.createElement("div");
            highlightsDiv.style.width = sumOfHighlights * 10 + "px";
            highlightsDiv.classList.add("highlight");
            valueDiv.appendChild(highlightsDiv);

            // append button and paragraph to div containers to parent div
            vals.appendChild(nodeBlock);
            vals.appendChild(valueDiv);
            vals.appendChild(highlighted);
            div.appendChild(vals);
        } else {
            div.appendChild(nodeBlock);
        }

        if (matrixNode.children) {
            // ...
        }
    }
    // ...
}

Jako výsledek dostanete vizuál s tlačítky a hodnotami highlighted value/default valueAs the result you'll get the visual with buttons and values highlighted value/default value

Vizuál s mapováním zobrazení maticových dat a zvýrazněním

Další krokyNext steps