Créer rapidement une vitrine de visuels personnalisés
Dans l’application de démonstration Power BI incorporée Créer rapidement des visuels personnalisés , les utilisateurs peuvent modifier des 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 vue d’ensemble de la création de rapports.
Créer rapidement une expérience de démonstration de visuels personnalisés
Contoso, une entreprise fictive, utilise la vitrine Créer rapidement des visuels personnalisés pour présenter un rapport incorporé Power BI avec plusieurs visualisations de ses 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 du type de secteur, du vendeur et de l’état des opportunités.
Le rapport incorporé comporte un bouton Créer un visuel rapide que les utilisateurs peuvent sélectionner pour créer des visuels en fonction des données.
Créer un visuel rapide
Les utilisateurs du rapport peuvent sélectionner le bouton Créer un visuel rapide à tout moment pendant leur session d’affichage pour créer de nouveaux visuels basés sur les données de ventes de Contoso.
Par exemple, si un utilisateur souhaite afficher un histogramme qui affiche le chiffre d’affaires réel en fonction de l’état de l’opportunité, 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 un type de visuel, l’utilisateur sélectionne Histogramme. Différents champs et valeurs sont disponibles en fonction du type de visuel sélectionné par l’utilisateur. Pour l’histogramme, l’utilisateur sélectionne Statut de l’opportunité pour le champ Axe et Revenu réel pour Les valeurs. Si vous le souhaitez, ils sélectionnent Le chiffre d’affaires estimé pour les info-bulles.
Une fois qu’il a rempli les champs Axe et Valeurs , l’utilisateur peut sélectionner différentes options de mise en forme, telles que l’affichage des valeurs et des é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 la crée.
Une fois le visuel terminé, l’utilisateur sélectionne Créer et 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é Estimation des revenus 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 points de suspension Autres options (...) en haut à droite du visuel, puis en sélectionnant Modifier le visuel.
Par exemple, un utilisateur de rapport peut vouloir remplacer le graphique en aires Nombre d’opportunités par secteur par histogramme, car les données ne sont pas continues. Lorsque l’utilisateur sélectionne Modifier le 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 changé le type de visuel en Histogramme. Les données s’affichent désormais sous forme d’histogramme.
Créer rapidement du code de présentation de visuels personnalisés
Le code pour l’implémentation de la démonstration se trouve dans le référentiel GitHub PowerBI-Embedded-Showcases .
Le code HTML de l’application génère le conteneur de rapports incorporé et les éléments, les boîtes de dialogue, les champs de texte et les boutons.
Le code JavaScript du 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 de client Power BI afin de créer facilement et rapidement des rapports et des visuels. Pour plus d’informations, consultez vue d’ensemble de la 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 Mettre en forme les propriétés visuelles.
Créer et configurer des visuels
Vous créez des visuels Power BI en utilisant createVisual et en spécifiant le type de visuel, par barChart exemple ou pieChart. Vous liez ensuite le type de visuel à des propriétés, des rôles, des champs et des données. Le fichier devisuals.js de présentation définit les propriétés, les rôles de données, les champs de données et les cibles pour les types de visuels pris en charge par cette application.
Dans le fichier index.js , le code suivant crée un visuel incorporé dans la boîte de dialogue Créer un visuel rapide , puis définit et applique ses propriétés. Par exemple, la propriété est activée pour les legend visuels de graphique en secteurs, mais désactivée pour les graphiques à barres et les histogrammes.
// 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 de la modification du type de visuel, les champs d’édition appropriés deviennent disponibles une fois que l’utilisateur a sélectionné le nouveau type de visuel.
Le code suivant modifie le type de visuel si l’utilisateur modifie un visuel pour le modifier, par exemple d’un graphique en aires à un histogramme. Pour plus d’informations sur la modification du type de 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 Plus d’options
Le rapport embedConfiguration utilise l’API de commande de menu Étendre pour ajouter une changeVisual commande 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 commandes de menu d’options Power BI préexistantes par défaut, 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 visuelle rapide
Le code suivant gère la sélection de la commande Modifier le visuel et les événements de clic sur le bouton Créer un visuel rapide . Le code écoute la sélection de la commande ou du bouton et ouvre la boîte de dialogue modale Créer un visuel rapide 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();
});