Evidenziare i punti dati in oggetti visivi di Power BI

Articolo
23/07/2024

Questo articolo descrive come evidenziare i dati sugli oggetti visivi di Power BI.

Per impostazione predefinita, quando viene selezionato un elemento, la matrice di values nell'dataViewoggetto viene filtrata in modo da visualizzare solo i valori selezionati. Quando la matrice values viene filtrata, tutti gli altri oggetti visivi nella pagina mostrano solo i dati selezionati.

Se si imposta la proprietà supportsHighlight nel file capabilities.json su true, viene restituita la matrice values completa non filtrata insieme a una matrice di highlights. La matrice highlights è la stessa lunghezza della matrice di valori e gli eventuali valori non selezionati vengono impostati su null. Con questa proprietà abilitata, i dati appropriati nell'oggetto visivo vengono evidenziati confrontando la matrice values con la matrice highlights.

Nessun supporto evidenziato
Evidenziare il supporto

Nell'esempio si noti che:

Senza il supporto dell'evidenziazione, la selezione è l'unico valore nella matrice values e l'unica barra visualizzata nella visualizzazione dati.
Con il supporto dell'evidenziazione, tutti i valori si trovano nella matrice values. La matrice highlights contiene un valore null per gli elementi non evidenziati. Tutte le barre vengono visualizzate nella visualizzazione dati e la barra evidenziata è un colore diverso.

Possono essere presenti anche più selezioni ed evidenziazioni parziali. I valori evidenziati vengono presentati nella visualizzazione dati.

Nota

Il mapping di viste dati della tabella non supporta la caratteristica highlights.

Evidenziare i punti dati con mapping di visualizzazione dati categorica

Per gli oggetti visivi con mapping di visualizzazione dati categorica, aggiungere "supportsHighlight": true al file capabilities.json. Ad esempio:

JSON

{
    "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
}

Dopo aver rimosso il codice non necessario, il codice sorgente dell'oggetto visivo predefinito è simile all'esempio seguente:

TypeScript

"use strict";

// ... default imports list

import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";

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

import { VisualFormattingSettingsModel } from "./settings";

export class Visual implements IVisual {
    private target: HTMLElement;
    private formattingSettings: VisualFormattingSettingsModel;
    private formattingSettingsService: FormattingSettingsService;

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

    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews);
        console.log('Visual update', options);

    }

    // Returns properties pane formatting model content hierarchies, properties and latest formatting values, Then populate properties pane. 
    // This method is called once every time we open properties pane or when the user edit any format property. 
    public getFormattingModel(): powerbi.visuals.FormattingModel {
        return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
    }
}

Importare le interfacce necessarie per elaborare i dati da Power BI:

TypeScript

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

Creare l'elemento div radice per i valori di categoria:

TypeScript

export class Visual implements IVisual {
    private target: HTMLElement;
    private formattingSettings: VisualFormattingSettingsModel;
    private formattingSettingsService: FormattingSettingsService;

    private div: HTMLDivElement; // new property

    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.formattingSettingsService = new FormattingSettingsService();
        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);

    }
    // ...
}

Cancellare il contenuto degli elementi div prima di eseguire il rendering di nuovi dati:

TypeScript

// ...
public update(options: VisualUpdateOptions) {
    this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews);
    console.log('Visual update', options);

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

Ottenere le categorie e i valori di misura dall'oggetto dataView:

TypeScript

public update(options: VisualUpdateOptions) {
    this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews);
    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;
    // ...
}

Dove categoryValues è una matrice di valori di categoria, measureValues è una matrice di misure e measureHighlights rappresenta le parti evidenziate dei valori.

Nota

Se i valori della proprietà measureHighlights sono inferiori ai valori della proprietà categoryValues, il valore è stato parzialmente evidenziato.

Enumerare la matrice categoryValues e ottenere i valori e le evidenziazioni corrispondenti:

TypeScript

// ...
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);

});

Creare gli elementi div e p per mostrare e visualizzare i valori della visualizzazione dati nel DOM visivo:

TypeScript

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 visualize 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 visualize 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);
});

Applicare gli stili richiesti per gli elementi per usare flexbox e definire i colori per gli elementi div:

css

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;
}

La visualizzazione seguente dell'oggetto visivo è il risultato:

Oggetti visivi con mapping di visualizzazione dati categorica ed evidenziazione

Evidenziare i punti dati con mapping di visualizzazione dati di matrice

Per gli oggetti visivi con mapping di visualizzazione dati matrice, aggiungere "supportsHighlight": true al file capabilities.json. Ad esempio:

JSON

{
    "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
}

Dati di esempio per creare una gerarchia per il mapping di visualizzazione dati di matrice:

Riga1	Row2	Row3	Colonna1	Colonna2	Colonna3	Valori
R1	R11	R111	C1	C11	C111	1
R1	R11	R112	C1	C11	C112	2
R1	R11	R113	C1	C11	C113	3
R1	R12	R121	C1	C12	C121	4
R1	R12	R122	C1	C12	C122	5
R1	R12	R123	C1	C12	C123	6
R1	R13	R131	C1	C13	C131	7
R1	R13	R132	C1	C13	C132	8
R1	R13	R133	C1	C13	C133	9
R2	R21	R211	S2	C21	C211	10
R2	R21	R212	S2	C21	C212	11
R2	R21	R213	S2	C21	C213	12
R2	R22	R221	S2	C22	C221	13
R2	R22	R222	S2	C22	C222	14
R2	R22	R223	S2	C22	C223	16
R2	R23	R231	S2	C23	C231	17
R2	R23	R232	S2	C23	C232	18
R2	R23	R233	S2	C23	C233	19

Creare il progetto visivo predefinito e applicare l'esempio del file capabilities.json.

Dopo aver rimosso il codice non necessario, il codice sorgente dell'oggetto visivo predefinito è simile all'esempio seguente:

TypeScript

"use strict";

// ... default imports

import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
import { VisualFormattingSettingsModel } from "./settings";

export class Visual implements IVisual {
    private target: HTMLElement;
    private formattingSettings: VisualFormattingSettingsModel;
    private formattingSettingsService: FormattingSettingsService;

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

    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews);
        console.log('Visual update', options);

    }

   /**
     * Returns properties pane formatting model content hierarchies, properties and latest formatting values, Then populate properties pane.
     * This method is called once every time we open properties pane or when the user edit any format property. 
     */
    public getFormattingModel(): powerbi.visuals.FormattingModel {
        return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
    }
}

Importare le interfacce necessarie per elaborare i dati da Power BI:

TypeScript

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

Creare due elementi div per il layout dell'oggetto visivo:

TypeScript

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";
}

Controllare i dati nel metodo update per assicurarsi che l'oggetto visivo riceva dati:

TypeScript

public update(options: VisualUpdateOptions) {
    this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews);
    console.log('Visual update', options);

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

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

Cancellare il contenuto degli elementi div prima di eseguire il rendering di nuovi dati:

TypeScript

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);
    // ...
}

Creare la funzione treeWalker per attraversare la struttura dei dati della matrice:

TypeScript

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

    }
    // ...
}

Dove matrixNode è il nodo corrente, levels è costituito da colonne di metadati di questo livello di gerarchia, div è l'elemento padre per gli elementi HTML figlio.

treeWalker è la funzione ricorsiva, deve creare l'elemento div e l'elemento p per il testo di intestazione, nonché chiamare la funzione per gli elementi figlio del nodo:

TypeScript

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));
        }
    }
    // ...
}

Chiamare la funzione per gli elementi radice della colonna e della riga della struttura di visualizzazione dati della matrice:

TypeScript

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));
}

Generare selectionID per i nodi e creare pulsanti per visualizzare i nodi:

TypeScript

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();
        });
        // ...
    }
    // ...
}

Il passaggio principale dell'evidenziazione consiste nel creare un'altra matrice di valori.

L'oggetto del nodo terminale ha due proprietà per la matrice di valori, il valore e l'evidenziazione:

JavaScript

JSON.stringify(options.dataViews[0].matrix.rows.root.children[0].children[0].children[0], null, " ");

JSON

{
 "level": 2,
 "levelValues": [
  {
   "value": "R233",
   "levelSourceIndex": 0
  }
 ],
 "value": "R233",
 "identity": {
  "identityIndex": 2
 },
 "values": {
  "0": {
   "value": null,
   "highlight": null
  },
  "1": {
   "value": 19,
   "highlight": 19
  }
 }
}

Dove value rappresenta il valore del nodo senza applicare una selezione dall'altro oggetto visivo, highlight indica quale parte dei dati è stata evidenziata.

Nota

Se il valore di highlight è minore del valore di value, allora value è stato parzialmente evidenziato.

Aggiungere codice per elaborare la matrice di values del nodo, se presentata:

TypeScript

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) {
            // ...
        }
    }
    // ...
}

Il risultato è un oggetto visivo con pulsanti e valori, ad esempio highlighted value/default value.

Risorse aggiuntive

Documentazione

Applicare la selezione a più oggetti visivi in Power BI - Power BI

Questo articolo descrive come applicare una selezione a più oggetti visivi usando la funzionalità di selezione visiva multipla in Power BI.
Selezioni di punti dati degli oggetti visivi di Power BI - Power BI

Informazioni su come usare la gestione selezione per aggiungere selezioni di punti dati agli oggetti visivi di Power BI e renderli interattivi.
Aggiungere il supporto per i segnalibri per oggetti visivi personalizzati di Power BI - Power BI

Informazioni su come aggiungere il supporto dei segnalibri agli oggetti visivi personalizzati in Power BI in modo che sia possibile passare da uno stato a all'altro con segnalibro.
Formattazione condizionale degli oggetti visivi personalizzati di Power BI - Power BI

Informazioni su come personalizzare l'oggetto visivo di Power BI applicando la funzionalità di formattazione condizionale in base ai valori dei dati.
Gli oggetti visivi di Power BI visualizzano l'icona di avviso - Power BI

Informazioni su come aggiungere un'icona di avviso di visualizzazione all'oggetto visivo di Power BI. Un'icona di avviso di visualizzazione può notificare all'utente un possibile problema o un errore.
Creazione di una finestra di dialogo in un oggetto visivo di Power BI - Power BI

Informazioni su come creare una finestra di dialogo in un oggetto visivo di Power BI per visualizzare informazioni aggiuntive al cliente in una finestra separata.
API per il formato dinamico dell'oggetto visivo personalizzato di Power BI. - Power BI

Questo articolo descrive l'API usata per consentire un valore di processo di oggetto visivo personalizzato di Power BI con stringhe di formato dinamico.
Modalità di modifica avanzata negli oggetti visivi di Power BI - Power BI

Informazioni su come abilitare e usare la modalità di modifica avanzata per configurare controlli avanzati dell'interfaccia utente negli oggetti visivi di Power BI.

Formazione

Percorso di apprendimento

Use advance techniques in canvas apps to perform custom updates and optimization - Training

Use advance techniques in canvas apps to perform custom updates and optimization

Certificazione

Microsoft Certified: Power BI Data Analyst Associate - Certifications

Illustrare metodi e procedure consigliate in linea con i requisiti aziendali e tecnici per la modellazione, la visualizzazione e l'analisi dei dati con Microsoft Power BI.

Eventi

Campionati mondiali di Power BI DataViz

14 feb, 16 - 31 mar, 16

Con 4 possibilità di entrare, si potrebbe vincere un pacchetto conferenza e renderlo al Live Grand Finale a Las Vegas

Altre informazioni

Condividi tramite

Evidenziare i punti dati in oggetti visivi di Power BI

Evidenziare i punti dati con mapping di visualizzazione dati categorica

Evidenziare i punti dati con mapping di visualizzazione dati di matrice

Commenti e suggerimenti

Risorse aggiuntive

Condividi tramite

Evidenziare i punti dati in oggetti visivi di Power BI

Evidenziare i punti dati con mapping di visualizzazione dati categorica

Evidenziare i punti dati con mapping di visualizzazione dati di matrice

Contenuto correlato

Commenti e suggerimenti

Risorse aggiuntive