Créer rapidement une présentation de visuels personnalisés

Dans le incorporé Power BI, créez rapidement des visuels personnalisés application de présentation, les utilisateurs peuvent modifier les visuels de rapport existants et créer leurs propres visuels personnalisés, même s’ils n’ont pas d’expérience Power BI précédente. Le code de présentation montre comment utiliser les API de création de rapports Power BI pour créer et modifier plusieurs types de visualisations au moment de l’exécution. Pour plus d’informations sur l’utilisation des API de création de rapports, consultez la vue d’ensemble de la création de rapports.

Créer rapidement une expérience de présentation de visuels personnalisés

Contoso, une entreprise fictive, utilise le créer rapidement des visuels personnalisés présentant des pour présenter un rapport incorporé Power BI avec plusieurs visualisations de leurs données de vente. Un histogramme, un graphique en aires, un graphique à barres, un graphique en secteurs et un graphique en courbes affichent les revenus et les opportunités en tant que fonctions de type industriel, de vendeur et d’état des opportunités.

Le rapport incorporé a un bouton Créer un visuel rapide que les utilisateurs peuvent sélectionner pour créer de nouveaux visuels en fonction des données.

Créer un visuel rapide

Les utilisateurs de rapports peuvent sélectionner le bouton Créer un visuel rapide à tout moment pendant leur session d’affichage pour créer de nouveaux visuels en fonction des données de vente Contoso.

Par exemple, si un utilisateur souhaite afficher un histogramme montrant le chiffre d’affaires réel basé sur l’état des opportunités, il sélectionne Créer un visuel rapide pour ouvrir la boîte de dialogue Créer un visuel rapide. La boîte de dialogue, qui est définie dans le code de l’application, contient un aperçu visuel de rapport incorporé à droite.

Dans la boîte de dialogue Créer un visuel rapide, sous Choisir le type de visuel, l’utilisateur sélectionne histogramme. Différents champs et valeurs sont disponibles en fonction du type visuel sélectionné par l’utilisateur. Pour le histogramme, l’utilisateur sélectionne 'état des opportunités pour le champ axe et Chiffre d’affaires réel pour Valeurs. Si vous le souhaitez, ils sélectionnent estimation du chiffre d’affaires pour info-bulles.

Une fois qu’ils ont rempli les champs de l’axe et Valeurs, l’utilisateur peut sélectionner différentes options de mise en forme, par exemple pour afficher les valeurs et étiquettes réelles. Ils peuvent également écrire et mettre en forme un titre pour le visuel.

L’aperçu du rapport incorporé dans la boîte de dialogue affiche la visualisation à mesure que l’utilisateur le génère.

Une fois le visuel terminé, l’utilisateur sélectionne Créeret la nouvelle visualisation apparaît dans le rapport.

Une info-bulle s’affiche lorsqu’un utilisateur pointe sur un point de données dans les visualisations. Étant donné que l’utilisateur a spécifié chiffre d’affaires estimé sous info-bulles lorsqu’il a créé le visuel, les données de ce champ apparaissent dans les info-bulles. Si l’utilisateur ne spécifie pas d’info-bulle, seules les données d’axe et de valeur apparaissent dans l’info-bulle.

Modifier un visuel existant

Les utilisateurs du rapport peuvent modifier n’importe quel visuel existant dans le rapport en sélectionnant les options Autres options points de suspension (...) en haut à droite du visuel, puis en sélectionnant Modifier le visuel.

Par exemple, un utilisateur de rapport peut souhaiter modifier le graphique en aires Nombre d’opportunités par secteur d’activité en histogramme, car les données ne sont pas continues. Lorsque l’utilisateur sélectionne Modifier l'visuel, la boîte de dialogue créer un visuel rapide s’ouvre et l’utilisateur peut modifier l’un des paramètres.

Dans cet exemple, l’utilisateur a modifié le type visuel en histogramme. Les données s’affichent désormais sous la forme d’un histogramme.

Créer rapidement du code de présentation de visuels personnalisés

Le code d’implémentation de la vitrine se trouve dans le dépôt PowerBI-Embedded-Showcases GitHub.

• L’application code HTML génère le conteneur et les éléments de rapport incorporés, les boîtes de dialogue, les champs de texte et les boutons.

• Le code JavaScript rapport définit les types de visualisation, gère les commandes et les événements, et effectue toutes les interactions et incorporations de rapports.

Vous pouvez utiliser l’extension powerbi-report-authoring pour la bibliothèque cliente Power BI pour faciliter et rapidement créer des rapports et des visuels. Pour plus d’informations, consultez la vue d’ensemble création de rapports.

Pour plus d’informations sur la création de visuels et leur liaison à des données, consultez Créer un visuel. Pour plus d’informations sur les propriétés visuelles, consultez Format des propriétés visuelles.

Créer et configurer des visuels

Vous créez des visuels Power BI à l’aide de createVisual et en spécifiant le type de visuel, tel que barChart ou pieChart. Vous liez ensuite le type visuel aux propriétés, rôles, champs et données. Le fichier visuals.js de présentation définit les propriétés, les rôles de données, les champs de données et les cibles des types visuels pris en charge par cette application.

Dans le fichier index.js, le code suivant crée un visuel incorporé à l’intérieur de la boîte de dialogue Créer un visuel rapide, et définit et applique ses propriétés. Par exemple, la propriété legend est activée pour les visuels de graphique en secteurs, mais désactivée pour les graphiques à barres et en colonnes.

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

Modifier le type de visuel

Dans la boîte de dialogue Créer un visuel rapide, tous les champs d’édition existants sont disponibles tant que le type de visuel sélectionné reste inchangé. Lors de la création d’un visuel ou d’un changement de type visuel, les champs d’édition appropriés deviennent disponibles une fois que l’utilisateur sélectionne le nouveau type de visuel.

Le code suivant modifie le type de visuel si l’utilisateur modifie un visuel pour modifier le type, par exemple d’un graphique en aires en histogramme. Pour plus d’informations sur la modification du type visuel, consultez Modifier le type de visuel.

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

Ajouter la commande Modifier le visuel au menu Autres options

Le rapport embedConfiguration utilise la commande étendre la commande de menu API pour ajouter une commande changeVisual au rapport, qui apparaît dans le menu Plus d’options de chaque visualisation.

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

La configuration masque également toutes les options de menu Power BI préexistantes et préexistantes commandes de menu, telles que Exporter des données et Trier. Pour plus d’informations sur la personnalisation des commandes visuelles, consultez Personnaliser les commandes de menu.

Gérer le visuel Modifier et créer des événements de sélection de visuel rapide

Le code suivant gère la sélection de commandes Modifier le visuel et Créer des événements de clic sur le bouton visuel rapide. Le code écoute la sélection de la commande ou du bouton, puis ouvre la boîte de dialogue Créer un visuel rapide modale pour modifier ou créer le visuel.

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

Contenu connexe

• Créer un visuel
• Modifier les commandes de menu
• Comment gérer les événements
• De terrain de jeu Power BI Embedded Analytics