Compartilhar via

Criar rapidamente uma demonstração de visuais personalizados

No Power BI embedded Criar rapidamente visuais personalizados aplicativo de demonstração, os usuários podem editar visuais de relatório existentes e criar seus próprios visuais personalizados, mesmo que não tenham experiência anterior do Power BI. O código de demonstração demonstra como usar as APIs de criação de relatório do Power BI para criar e editar vários tipos de visualizações em runtime. Para obter mais informações sobre como usar as APIs de criação de relatório, consulte a visão geral de criação do relatório .

Criar rapidamente a experiência de demonstração de visuais personalizados

A Contoso, uma empresa fictícia, usa o Criar rapidamente visuais personalizados para apresentar um relatório inserido do Power BI com várias visualizações de seus dados de vendas. Um gráfico de colunas, grafo de área, gráfico de barras, gráfico de pizza e grafo de linha mostram a receita e as oportunidades como funções de tipo do setor, vendedor e status de oportunidade.

O relatório inserido tem um botão Criar visual rápido que os usuários podem selecionar para criar novos visuais com base nos dados.

Captura de tela mostrando o relatório inserido do Power BI com o botão Criar visual rápido.

Criar um novo visual rápido

Os usuários de relatório podem selecionar o botão Criar visual rápido a qualquer momento durante a sessão de exibição para criar novos visuais com base nos dados de vendas da Contoso.

Por exemplo, se um usuário quiser ver um gráfico de colunas que mostra a Receita Real com base no Status da Oportunidade, selecione Criar visuais rápidos para abrir a caixa de diálogo Criar visual rápido. A caixa de diálogo, que é definida no código do aplicativo, contém uma visualização visual de relatório inserida à direita.

Na caixa de diálogo Criar visual rápido, em Escolherde tipo visual, o usuário seleciona Gráfico de colunas. Diferentes campos e valores estão disponíveis dependendo de qual tipo visual o usuário selecionou. Para o gráfico de colunas, o usuário seleciona de Status de Oportunidade para o campo do Eixo e de Receita Real para valores . Opcionalmente, eles selecionam de Receita Estimada para Dicas de Ferramentas.

Depois de preencher os campos do Eixo e Valores, o usuário poderá selecionar várias opções de formatação, como exibir valores e rótulos reais. Eles também podem escrever e formatar um título para o visual.

A visualização do relatório inserido na caixa de diálogo mostra a visualização à medida que o usuário a cria.

Captura de tela mostrando a caixa de diálogo Criar visual rápido.

Quando o visual é concluído, o usuário seleciona Criare a nova visualização aparece no relatório.

Captura de tela mostrando um visual recém-criado com uma dica de ferramenta mostrando um dos pontos de dados.

Uma dica de ferramenta é exibida quando um usuário passa o mouse sobre um ponto de dados em visualizações. Como o usuário especificou receita estimada em dicas de ferramentas quando criou o visual, os dados desse campo são exibidos nas dicas de ferramentas. Se o usuário não especificar uma dica de ferramenta, somente os dados de eixo e valor aparecerão na dica de ferramenta.

Alterar um visual existente

Os usuários de relatório podem alterar qualquer visual existente no relatório selecionando o Mais opções reticências (...) no canto superior direito do visual e selecionando Alterarvisuais.

Por exemplo, um usuário de relatório pode querer alterar o número de oportunidades por setor gráfico de áreas para um gráfico de colunas, pois os dados não são contínuos. Quando o usuário seleciona Alterarvisual, a caixa de diálogo Criar visual rápido é aberta e o usuário pode alterar qualquer uma das configurações.

Captura de tela mostrando o visual do gráfico de área com o comando Alterar visual.

Neste exemplo, o usuário alterou o tipo visual para Gráfico de colunas. Os dados agora são exibidos como um gráfico de colunas.

Captura de tela mostrando o visual alterado para um gráfico de colunas.

Criar rapidamente o código de demonstração de visuais personalizados

O código para implementar a demonstração está no repositório PowerBI-Embedded-Showcases GitHub.

  • O aplicativo código HTML cria o contêiner de relatório inserido e elementos, caixas de diálogo, campos de texto e botões.

  • O código JavaScript de relatório define os tipos de visualização, manipula comandos e eventos e executa todas as interações e interações de relatório.

Você pode usar a extensão de de criação de relatório do powerbi para a biblioteca de clientes do Power BI para ajudar a criar relatórios e visuais com facilidade e rapidez. Para obter mais informações, consulte a visão geral de criação de relatório .

Para obter mais informações sobre como criar visuais e vinculá-los a dados, consulte Criar um visual. Para obter mais informações sobre propriedades visuais, consulte Formatar propriedades visuais.

Criar e configurar visuais

Você cria visuais do Power BI usando createVisual e especificando o tipo visual, como barChart ou pieChart. Em seguida, você associa o tipo visual a propriedades, funções, campos e dados. A demonstração visuals.js arquivo define as propriedades, as funções de dados, os campos de dados e os destinos para os tipos visuais compatíveis com esse aplicativo.

No arquivo index.js, o código a seguir cria um visual inserido dentro da caixa de diálogo Criar visual rápido e define e aplica suas propriedades. Por exemplo, a propriedade legend está habilitada para visuais de gráfico de pizza, mas desabilitada para gráficos de barras e colunas.

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

Alterar o tipo visual

Na caixa de diálogo Criar visual rápido, todos os campos de edição existentes estão disponíveis, desde que o tipo visual selecionado permaneça inalterado. Ao criar um novo visual ou alterar o tipo visual, os campos de edição relevantes ficam disponíveis depois que o usuário seleciona o novo tipo visual.

O código a seguir altera o tipo visual se o usuário edita um visual para alterar o tipo, por exemplo, de um gráfico de área para um gráfico de colunas. Para obter mais informações sobre como alterar o tipo visual, consulte Alterar o tipo visual.

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

Adicionar o comando Alterar visual ao menu Mais opções

O relatório embedConfiguration usa o comando de menu estender API para adicionar um comando changeVisual ao relatório, que aparece no menu Mais opções de cada visualização.

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

A configuração também oculta todos os comandos de menu padrão e pré-existentes do Power BI Mais opções, como Exportar de dados e Classificar. Para obter mais informações sobre como personalizar comandos visuais, consulte Personalizar comandos de menu.

Manipular o visual de alteração e criar eventos de seleção visual rápida

O código a seguir manipula a seleção de comando Alterar visual e Criar eventos rápidos de clique no botão visual. O código escuta a seleção de comando ou botão e abre o Caixa de diálogo Criar visual rápido modal para editar ou criar o visual.

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

Conteúdo relacionado

  • Last updated on