Creare rapidamente oggetti visivi personalizzati

In Power BI embedded Creare rapidamente oggetti visivi personalizzati'applicazione di presentazione, gli utenti possono modificare gli oggetti visivi del report esistenti e creare oggetti visivi personalizzati, anche se non hanno esperienza precedente di Power BI. Il codice di presentazione illustra come usare le API di creazione di report di Power BI per creare e modificare diversi tipi di visualizzazioni in fase di esecuzione. Per altre informazioni sull'uso delle API di creazione di report, vedere la panoramica sulla creazione di report .

Creare rapidamente un'esperienza di presentazione degli oggetti visivi personalizzati

Contoso, una società fittizia, usa l'Creare rapidamente oggetti visivi personalizzati per presentare un report incorporato di Power BI con diverse visualizzazioni dei dati di vendita. Un istogramma, un grafico ad area, un grafico a barre, un grafico a torta e un grafico a linee mostrano ricavi e opportunità come funzioni di tipo di settore, venditore e stato opportunità.

Il report incorporato include un pulsante Crea oggetto visivo rapido che gli utenti possono selezionare per creare nuovi oggetti visivi in base ai dati.

Creare un nuovo oggetto visivo rapido

Gli utenti del report possono selezionare il pulsante Crea oggetto visivo rapido in qualsiasi momento durante la sessione di visualizzazione per creare nuovi oggetti visivi in base ai dati delle vendite di Contoso.

Ad esempio, se un utente vuole visualizzare un istogramma che mostra i ricavi effettivi in base allo stato dell'opportunità, seleziona Crea oggetto visivo rapido per aprire la finestra di dialogo Crea oggetto visivo rapido. La finestra di dialogo, definita nel codice dell'applicazione, contiene un'anteprima visiva del report incorporata a destra.

Nella finestra di dialogo Crea oggetto visivo rapido in Scegliere il tipo di oggetto visivol'utente seleziona istogramma. Sono disponibili campi e valori diversi a seconda del tipo di oggetto visivo selezionato dall'utente. Per l'istogramma, l'utente seleziona Stato opportunità per il campo asse e ricavi effettivi per i valori . Facoltativamente, selezionano dei ricavi stimati per descrizioni comando.

Dopo aver compilato i campi asse e valori, l'utente può selezionare varie opzioni di formattazione, ad esempio se visualizzare valori ed etichette effettivi. Possono anche scrivere e formattare un titolo per l'oggetto visivo.

L'anteprima del report incorporato nella finestra di dialogo mostra la visualizzazione durante la compilazione dell'utente.

Al termine dell'oggetto visivo, l'utente seleziona Creae la nuova visualizzazione viene visualizzata nel report.

Una descrizione comando viene visualizzata quando un utente passa il puntatore del mouse su un punto dati nelle visualizzazioni. Poiché l'utente ha specificato ricavi stimati in descrizioni comando al momento della creazione dell'oggetto visivo, i dati del campo vengono visualizzati nelle descrizioni comando. Se l'utente non specifica una descrizione comando, nella descrizione comando vengono visualizzati solo i dati dell'asse e del valore.

Modificare un oggetto visivo esistente

Gli utenti del report possono modificare qualsiasi oggetto visivo esistente nel report selezionando la Altre opzioni puntini di sospensione (...) in alto a destra dell'oggetto visivo e quindi selezionando Modifica oggetto visivo.

Ad esempio, un utente del report potrebbe voler modificare il grafico ad area Number of Opportunities by Industry in un istogramma, perché i dati non sono continui. Quando l'utente seleziona Modifica oggetto visivo, viene visualizzata la finestra di dialogo Crea oggetto visivo rapido e l'utente può modificare qualsiasi impostazione.

In questo esempio l'utente ha modificato il tipo di oggetto visivo in istogramma. I dati vengono ora visualizzati come istogramma.

Creare rapidamente oggetti visivi personalizzati che presentano il codice

Il codice per l'implementazione della presentazione si trova nel repository PowerBI-Embedded-Showcases GitHub.

• L'applicazione codice HTML compila il contenitore e gli elementi del report incorporati, le finestre di dialogo, i campi di testo e i pulsanti.

• Il codice JavaScript report definisce i tipi di visualizzazione, gestisce comandi ed eventi ed esegue tutte le interazioni e incorporamento dei report.

È possibile usare l'estensione powerbi-report-authoring per la libreria client di Power BI per semplificare e rapidamente la creazione di report e oggetti visivi. Per altre informazioni, vedere panoramica della creazione di report .

Per altre informazioni sulla creazione di oggetti visivi e sull'associazione ai dati, vedere Creare un oggetto visivo. Per altre informazioni sulle proprietà visive, vedere Format visual properties.

Creare e configurare oggetti visivi

È possibile creare oggetti visivi di Power BI usando createVisual e specificando il tipo di oggetto visivo, ad esempio barChart o pieChart. Il tipo di oggetto visivo viene quindi associato a proprietà, ruoli, campi e dati. La vetrina visuals.js file definisce le proprietà, i ruoli dati, i campi dati e le destinazioni per i tipi di oggetto visivo supportati dall'applicazione.

Nel file index.js il codice seguente crea un oggetto visivo incorporato all'interno della finestra di dialogo Crea oggetto visivo rapido e imposta e applica le relative proprietà. Ad esempio, la proprietà legend è abilitata per gli oggetti visivi grafico a torta, ma disabilitata per i grafici a barre e istogrammi.

// Based on the state object, create a visual inside the modal
async function createVisualInsideTheModalInEditMode(visualType, dataRoles) {

    // Create visual inside the modal
    const newVisual = await visualCreatorShowcaseState.page.createVisual(visualType, getVisualLayout());

    // Update state
    visualCreatorShowcaseState.newVisual = newVisual.visual;
    visualCreatorShowcaseState.visualType = newVisual.visual.type;
    const visual = newVisual.visual;
    const newVisualType = visual.type;
    
    // Enable the legend property for pie chart
    if (visualCreatorShowcaseState.visualType === "pieChart") {
        visual.setProperty(propertyToSelector("legend"), { schema: schemas.property, value: true });
    }
    
    // Add properties to the created visual
    Object.entries(visualCreatorShowcaseState.properties).forEach(property => {
        let [propertyName, propertyValue] = property;
    ...
        // Check the validity of the given property for the given visual-type and apply it to the visual
        applyValidPropertiesToTheVisual(visual, newVisualType, propertyName, propertyValue);
    });
    
    // Disable the legend for the column and bar charts
    if (visualCreatorShowcaseState.visualType === "columnChart" || visualCreatorShowcaseState.visualType === "barChart") {
        visual.setProperty(propertyToSelector("legend"), { schema: schemas.property, value: false });
    }

Modificare il tipo di oggetto visivo

Nella finestra di dialogo Crea oggetto visivo rapido tutti i campi di modifica esistenti sono disponibili purché il tipo di oggetto visivo selezionato rimanga invariato. Quando si crea un nuovo oggetto visivo o si modifica il tipo di oggetto visivo, i campi di modifica pertinenti diventano disponibili dopo che l'utente seleziona il nuovo tipo di oggetto visivo.

Il codice seguente modifica il tipo di oggetto visivo se l'utente modifica un oggetto visivo per modificare il tipo, ad esempio da un grafico ad aree a un istogramma. Per altre informazioni sulla modifica del tipo di oggetto visivo, vedere Modificare il tipo di oggetto visivo.

        const oldVisualType = selectedVisual.visual.type;
        const oldVisual = selectedVisual.visual;
        if (oldVisualType !== visualCreatorShowcaseState.visualType) {

            // If visual-type is changed, remove all active data-fields on the visual
            await removeAllActiveDataRoles(oldVisual, oldVisualType);

            // Change the visual type
            await oldVisual.changeType(visualCreatorShowcaseState.visualType);
        }

Aggiungere il comando Cambia oggetto visivo al menu Altre opzioni

Il report embedConfiguration usa il comando di menu estendi API per aggiungere un comando changeVisual al report, visualizzato nel menu Altre opzioni di ogni visualizzazione.

let config = {
...
    settings: {
        ...
        extensions: [
            {
                command: {
                    name: "changeVisual",
                    title: "Change visual",
                    extend: {
                        visualOptionsMenu: {
                            title: "Change visual",
                            menuLocation: models.MenuLocation.Top,

La configurazione nasconde anche tutti i comandi di menu predefiniti preesistenti di Power BI Altre opzioni, ad esempio Esporta dati e Ordina. Per altre informazioni sulla personalizzazione dei comandi visivi, vedere Personalizzare i comandi di menu.

Gestire l'oggetto visivo Modifica e Creare eventi di selezione rapida degli oggetti visivi

Il codice seguente gestisce la selezione del comando modifica oggetto visivo e Crea rapido oggetto visivo. Il codice è in ascolto della selezione del comando o del pulsante e apre il Crea oggetto visivo rapido finestra di dialogo modale per modificare o creare l'oggetto visivo.

    // Listen for the commandTriggered event
    baseReportState.report.on("commandTriggered", function (event) {

        // Open the modal and set the fields, properties and title for the visual
        openModalAndFillState(event.detail);
    });

    baseReportState.report.on("buttonClicked", function () {

        // Show the modal to create the visual
        openModalAndFillState();
    });

Contenuto correlato

• Creare un oggetto visivo
• modifica comandi di menu
• Come gestire gli eventi
• di Power BI Embedded Analytics Playground