Tutorial: criar um gráfico de barras

Este tutorial mostra como desenvolver um visual do Power BI que exibe dados na forma de um gráfico de barras simples. Este visual dá suporte a uma quantidade mínima de personalização. Outras páginas desta documentação explicam como adicionar mais personalização, como menus de contexto, dicas de ferramentas e muito mais.

Neste tutorial, você aprenderá como:

• Definir as funcionalidades do seu visual
• Entender o código-fonte usado para criar um visual
• Renderizar o visual
• Adicionar objetos ao painel de propriedades
• Empacotar o visual

Configurar seu ambiente

Antes de começar a desenvolver seu visual do Power BI, confira se você tem tudo o que está listado nesta seção.

• Uma conta do Power BI Pro ou PPU (Premium por usuário) . Caso não tenha uma, inscreva-se em uma avaliação gratuita.

• Visual Studio Code (VS Code). O VS Code é um IDE (ambiente de desenvolvimento integrado) ideal para desenvolver aplicativos JavaScript e TypeScript.

• Windows PowerShell versão 4 ou posterior (para Windows). Ou Terminal (para OSX).

• Um ambiente pronto para desenvolver um visual do Power BI. Configure seu ambiente para desenvolver um visual do Power BI.

• Este tutorial usa o relatório Análise de vendas dos EUA. Você pode baixar esse relatório e carregá-lo no serviço do Power BI ou usar seu próprio relatório. Se você precisar de mais informações sobre o serviço do Power BI e como carregar arquivos, confira o tutorial Introdução à criação no serviço do Power BI.

Observação

Se a biblioteca D3 JavaScript não foi instalada como parte de sua configuração, instale-a agora. No PowerShell, execute npm i d3@latest --save

A criação de um visual de gráfico de barras envolve as seguintes etapas:

1. Criar um novo projeto
2. Definir o arquivo de funcionalidades -capabilities.json
3. Criar uma API do visual
4. Empacotar seu visual -pbiviz.json

Criar um novo projeto

A finalidade deste tutorial é ajudar você a entender como um visual é estruturado e escrito. Siga estas instruções para criar um visual de código de barras do zero ou você pode clonar o repositório de código-fonte e usá-lo para acompanhar sem criar seu próprio visual.

Criar um novo visual

1. Abra o PowerShell e navegue até a pasta na qual você deseja criar seu projeto.

2. Digite o seguinte comando:

   pbiviz new BarChart
   

   Agora você deve ter uma pasta chamada BarChart que contém os arquivos do visual.

3. No VS Code, abra o arquivo [tsconfig.json] (visual-project-structure.md#tsconfigjson) e altere o nome de "files" para "src/barChart.ts".

   "files": [
   "src/barChart.ts"
   ]
   

   Os "arquivos" tsconfig.json apontam para o arquivo onde a classe principal do visual está localizada.

   O arquivo tsconfig.json deve ter a seguinte aparência.

4. O arquivo package.json contém uma lista de dependências do projeto. Substitua seu arquivo project.json por este.

Clonar código-fonte

git clone

Agora você deve ter uma nova pasta para seu visual com os seguintes arquivos e pastas:

Para obter uma explicação detalhada da função de cada um desses arquivos, confira Estrutura do projeto do visual do Power BI.

Os dois arquivos nos quais nos concentramos neste tutorial são o arquivo capabilities.json, que descreve o visual para o host, e o arquivo src/barchart.ts, que contém a API do visual.

Definir funcionalidades

O arquivo capabilities.json é onde associamos os dados ao host. Descrevemos o tipo de campos de dados que ele aceita e quais recursos o visual deve ter.

Definir funções de dados

As variáveis são definidas e ligadas na seção dataRoles do arquivo capabilities. Queremos que nosso gráfico de barras aceite dois tipos de variáveis:

• Dados categóricos representados pelas diferentes barras no gráfico
• Dados numéricos ou medidos, que são representados pela altura de cada barra

No Visual Studio Code, no arquivo capabilities.json, confirme se o seguinte fragmento JSON aparece no objeto rotulado "dataRoles".

    "dataRoles": [
        {
            "displayName": "Category Data",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Measure Data",
            "name": "measure",
            "kind": "Measure"
        }
    ],

Mapear os dados

Em seguida, adicione mapeamento de dados para informar ao host o que fazer com essas variáveis:

Substitua o conteúdo do objeto "dataViewMappings" pelo seguinte código:

"dataViewMappings": [
        {
            "conditions": [
                {
                    "category": {
                        "max": 1
                    },
                    "measure": {
                        "max": 1
                    }
                }
            ],
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    }
                },
                "values": {
                    "select": [
                        {
                            "bind": {
                                "to": "measure"
                            }
                        }
                    ]
                }
            }
        }
    ],

O código acima cria as "condições" de que cada objeto de função de dados pode conter apenas um campo por vez. Observe que usamos o name interno da função de dados para fazer referência a cada campo.

Ele também define o mapeamento de dados categóricos para que cada campo seja mapeado para a variável correta.

Definir objetos para o painel de propriedades

A seção "objetos" do arquivo capabilities é onde definimos os recursos personalizáveis que devem aparecer no painel Formatar. Esses recursos não afetam o conteúdo do gráfico, mas podem mudar sua aparência.

Para saber mais sobre objetos e como eles funcionam, confira Objetos.

Os objetos a seguir são opcionais. Adicione-os se desejar percorrer as seções opcionais deste tutorial para adicionar cores e renderizar o eixo X.

Substitua o conteúdo da seção "objetos" pelo seguinte código:

     "objects": {
        "enableAxis": {
            "properties": {
                "show": {
                    "type": {
                        "bool": true
                    }
                },
                "fill": {
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        },
        "colorSelector": {
            "properties": {
                "fill": {
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        }
     },

Salve o arquivo capabilities.json.

O arquivo capabilities final deve ser semelhante ao deste exemplo.

API de visual

Todos os visuais começam com uma classe que implementa a interface IVisual. O src/visual.ts é o arquivo padrão que contém essa classe.

Neste tutorial, chamamos nosso arquivo IVisual de barChart.ts. Baixe o arquivo e salve-o na pasta /src, caso ainda não tenha feito isso. Nesta seção, analisamos este arquivo em detalhes e descrevemos as várias seções.

Importações

A primeira seção do arquivo importa os módulos que são necessários para este visual. Observe que, além dos módulos visuais do Power BI, também importamos a biblioteca D3.

Os módulos a seguir são importados para o arquivo barChart.ts:

import {
    BaseType,
    select as d3Select,
    Selection as d3Selection
} from "d3-selection";
import {
    ScaleBand,
    ScaleLinear,
    scaleBand,
    scaleLinear
} from "d3-scale";
import "./../style/visual.less";

import { Axis, axisBottom } from "d3-axis";

import powerbi from "powerbi-visuals-api";

type Selection<T extends BaseType> = d3Selection<T, any, any, any>;

// powerbi.visuals
import DataViewCategoryColumn = powerbi.DataViewCategoryColumn;
import Fill = powerbi.Fill;
import ISandboxExtendedColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
import ISelectionId = powerbi.visuals.ISelectionId;
import IVisual = powerbi.extensibility.IVisual;
import IVisualHost = powerbi.extensibility.visual.IVisualHost;
import PrimitiveValue = powerbi.PrimitiveValue;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import DataViewObjectPropertyIdentifier = powerbi.DataViewObjectPropertyIdentifier;

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

import { BarChartSettingsModel } from "./barChartSettingsModel";
import { dataViewObjects} from "powerbi-visuals-utils-dataviewutils";

Interfaces

Em seguida, definimos as interfaces visuais. A interface a seguir é usada para descrever nosso visual de gráfico de barras:

• BarChartDataPoint

Esta interface é definida da seguinte maneira:

/**
 * Interface for BarChart data points.
 *
 * @interface
 * @property {PrimitiveValue} value     - Data value for point.
 * @property {string} category          - Corresponding category of data value.
 * @property {string} color             - Color corresponding to data point.
 * @property {string} strokeColor       - Stroke color for data point column.
 * @property {number} strokeWidth       - Stroke width for data point column.
 * @property {ISelectionId} selectionId - Id assigned to data point for cross filtering
 *                                        and visual interaction.
 */
interface BarChartDataPoint {
    value: PrimitiveValue;
    category: string;
    color: string;
    strokeColor: string;
    strokeWidth: number;
    selectionId: ISelectionId;
}

Transformação visual

Agora que a estrutura de dados está definida, precisamos mapear dados para ela usando a função createSelectorDataPoints. Essa função recebe dados do modo de exibição de dados e os transforma em um formato que o visual pode usar. Neste caso, ele retorna a interface BarChartDataPoint[] descrita na seção anterior.

O DataView contém os dados a serem visualizados. Esses dados podem estar em formatos diferentes, como categóricos ou tabulares. Para criar um visual categórico como um gráfico de barras, use a propriedade categórica no DataView.

Essa função é chamada sempre que o visual é atualizado.

/**
 * Function that converts queried data into a viewmodel that will be used by the visual.
 *
 * @function
 * @param {VisualUpdateOptions} options - Contains references to the size of the container
 *                                        and the dataView which contains all the data
 *                                        the visual had queried.
 * @param {IVisualHost} host            - Contains references to the host which contains services
 */
function createSelectorDataPoints(options: VisualUpdateOptions, host: IVisualHost): BarChartDataPoint[] {
    const barChartDataPoints: BarChartDataPoint[] = []
    const dataViews = options.dataViews;

    if (!dataViews
        || !dataViews[0]
        || !dataViews[0].categorical
        || !dataViews[0].categorical.categories
        || !dataViews[0].categorical.categories[0].source
        || !dataViews[0].categorical.values
    ) {
        return barChartDataPoints;
    }

    const categorical = dataViews[0].categorical;
    const category = categorical.categories[0];
    const dataValue = categorical.values[0];

    const colorPalette: ISandboxExtendedColorPalette = host.colorPalette;

    const strokeColor: string = getColumnStrokeColor(colorPalette);

    const strokeWidth: number = getColumnStrokeWidth(colorPalette.isHighContrast);

    for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
        const color: string = getColumnColorByIndex(category, i, colorPalette);

        const selectionId: ISelectionId = host.createSelectionIdBuilder()
            .withCategory(category, i)
            .createSelectionId();

        barChartDataPoints.push({
            color,
            strokeColor,
            strokeWidth,
            selectionId,
            value: dataValue.values[i],
            category: `${category.values[i]}`,
        });
    }

    return barChartDataPoints;
}

Observação

As próximas funções no arquivo barChart.ts lidam com a cor e a criação do eixo X. Elas são opcionais e serão discutidas mais adiante neste tutorial. O tutorial continuará da função IVisual.

Renderizar o visual

Depois que os dados são definidos, renderizamos o visual usando a classe BarChart que implementa a interface IVisual. A interface IVisual é descrita na página da API do visual. Ela contém um método constructor que cria o visual e um método update que é chamado cada vez que o visual é recarregado. Antes de renderizar o visual, precisamos declarar os membros da classe:

export class BarChart implements IVisual {
    private svg: Selection<SVGSVGElement>;
    private host: IVisualHost;
    private barContainer: Selection<SVGElement>;
    private xAxis: Selection<SVGGElement>;
    private barDataPoints: BarChartDataPoint[];
    private formattingSettings: BarChartSettingsModel;
    private formattingSettingsService: FormattingSettingsService;

    private barSelection: Selection<BaseType>;

    static Config = {
        xScalePadding: 0.1,
        solidOpacity: 1,
        transparentOpacity: 1,
        margins: {
            top: 0,
            right: 0,
            bottom: 25,
            left: 30,
        },
        xAxisFontMultiplier: 0.04,
    };
}

Construir o visual

A função do construtor é chamada apenas uma vez, quando o visual é renderizado pela primeira vez. Ela cria contêineres de SVG vazios para o gráfico de barras e o eixo X. Observe que ela usa a biblioteca D3 para renderizar o SVG.

/**
     * Creates instance of BarChart. This method is only called once.
     *
     * @constructor
     * @param {VisualConstructorOptions} options - Contains references to the element that will
     *                                             contain the visual and a reference to the host
     *                                             which contains services.
     */
    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        //Creating the formatting settings service.
        const localizationManager = this.host.createLocalizationManager();
        this.formattingSettingsService = new FormattingSettingsService(localizationManager);

        this.svg = d3Select(options.element)
            .append('svg')
            .classed('barChart', true);

        this.barContainer = this.svg
            .append('g')
            .classed('barContainer', true);

        this.xAxis = this.svg
            .append('g')
            .classed('xAxis', true);
    }

Atualizar o visual

O método de atualização é chamado toda vez que o tamanho do visual ou um de seus valores é alterado.

Escala

Precisamos dimensionar o visual para que o número de barras e os valores atuais caibam nos limites de largura e altura definidos do visual. Isso é semelhante ao método de atualização no Tutorial de cartão circular.

Para calcular a escala, usamos os métodos scaleLinear e scaleBand que foram importados anteriormente da biblioteca d3-scale.

O valor options.dataViews[0].categorical.values[0].maxLocal contém o maior valor de todos os pontos de dados atuais. Esse valor é usado para determinar a altura do eixo y. O dimensionamento da largura do eixo x é determinado pelo número de categorias associadas ao visual na interface barchartdatapoint.

Para os casos em que o eixo X é renderizado, esse visual também manipula quebras de palavras se não houver espaço suficiente para escrever o nome inteiro no eixo X.

Outros recursos de atualização

Além do dimensionamento, o método de atualização também lida com seleções e cores. Esses recursos são opcionais e são discutidos posteriormente:

   /**
     * Updates the state of the visual. Every sequential databinding and resize will call update.
     *
     * @function
     * @param {VisualUpdateOptions} options - Contains references to the size of the container
     *                                        and the dataView which contains all the data
     *                                        the visual had queried.
     */
    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(BarChartSettingsModel, options.dataViews?.[0]);
        this.barDataPoints = createSelectorDataPoints(options, this.host);
        this.formattingSettings.populateColorSelector(this.barDataPoints);

        const width = options.viewport.width;
        let height = options.viewport.height;

        this.svg
            .attr("width", width)
            .attr("height", height);

        if (this.formattingSettings.enableAxis.show.value) {
            const margins = BarChart.Config.margins;
            height -= margins.bottom;
        }

        this.xAxis
            .style("font-size", Math.min(height, width) * BarChart.Config.xAxisFontMultiplier)
            .style("fill", this.formattingSettings.enableAxis.fill.value.value);

        const yScale: ScaleLinear<number, number> = scaleLinear()
            .domain([0, <number>options.dataViews[0].categorical.values[0].maxLocal])
            .range([height, 0]);

        const xScale: ScaleBand<string> = scaleBand()
            .domain(this.barDataPoints.map(d => d.category))
            .rangeRound([0, width])
            .padding(0.2);

        const xAxis: Axis<string> = axisBottom(xScale);

        this.xAxis.attr('transform', 'translate(0, ' + height + ')')
            .call(xAxis)
            .attr("color", this.formattingSettings.enableAxis.fill.value.value);

        const textNodes: Selection<SVGElement> = this.xAxis.selectAll("text");
        BarChart.wordBreak(textNodes, xScale.bandwidth(), height);

        this.barSelection = this.barContainer
            .selectAll('.bar')
            .data(this.barDataPoints);

        const barSelectionMerged = this.barSelection
            .enter()
            .append('rect')
            .merge(<any>this.barSelection);

        barSelectionMerged.classed('bar', true);

        barSelectionMerged
            .attr("width", xScale.bandwidth())
            .attr("height", (dataPoint: BarChartDataPoint) => height - yScale(<number>dataPoint.value))
            .attr("y", (dataPoint: BarChartDataPoint) => yScale(<number>dataPoint.value))
            .attr("x", (dataPoint: BarChartDataPoint) => xScale(dataPoint.category))
            .style("fill", (dataPoint: BarChartDataPoint) => dataPoint.color)
            .style("stroke", (dataPoint: BarChartDataPoint) => dataPoint.strokeColor)
            .style("stroke-width", (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`);

        this.barSelection
            .exit()
            .remove();
    }

    private static wordBreak(
        textNodes: Selection<SVGElement>,
        allowedWidth: number,
        maxHeight: number
    ) {
        textNodes.each(function () {
            textMeasurementService.wordBreak(
                this,
                allowedWidth,
                maxHeight);
        });
    }

Preencher o painel de propriedades usando os utilitários do modelo de formatação

O método final na função IVisual é getFormattingModel. Esse método compila e retorna um objeto de modelo de formatação de painel de formato moderno que contém todos os componentes e propriedades do painel de formato. Em seguida, ele coloca o objeto dentro do painel Formatar. Em nosso caso, criamos cartões de formato para enableAxis e colorSelector, incluindo propriedades de formatação para show e fill, de acordo com os "objetos" no arquivo capabilities.json. Para adicionar um seletor de cores para cada categoria no painel Propriedade, adicione um loop for em barDataPoints e, para cada um, adicione uma nova propriedade de formato de seletor de cores ao modelo de formatação.

Para criar um modelo de formatação, o desenvolvedor deve estar familiarizado com todos os seus componentes. Confira os componentes do painel de formato em Format Pane. Confira a API getFormattingModel do FormattingModel utils no repositório de utilitários do modelo de formatação.

Baixe o arquivo e salve-o na pasta /src. Declare propriedades de formatação e seus valores em uma classe de configurações de formatação:

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
import { BarChartDataPoint } from "./barChart";

import Card = formattingSettings.SimpleCard;
import Model = formattingSettings.Model;
import Slice = formattingSettings.Slice;
import ColorPicker = formattingSettings.ColorPicker;
import ToggleSwitch = formattingSettings.ToggleSwitch;

/**
 * Enable Axis Formatting Card
 */
class EnableAxisCardSettings extends Card {
    show = new ToggleSwitch({
        name: "show",
        displayName: undefined,
        value: false,
    });

    fill = new ColorPicker({
        name: "fill",
        displayName: "Color",
        value: { value: "#000000" }
    });
    topLevelSlice: ToggleSwitch = this.show;
    name: string = "enableAxis";
    displayName: string = "Enable Axis";
    slices: Slice[] = [this.fill];
}

/**
 * Color Selector Formatting Card
 */
class ColorSelectorCardSettings extends Card {
    name: string = "colorSelector";
    displayName: string = "Data Colors";

    // slices will be populated in barChart settings model `populateColorSelector` method
    slices: Slice[] = [];
}

/**
* BarChart formatting settings model class
*/
export class BarChartSettingsModel extends Model {
    // Create formatting settings model formatting cards
    enableAxis = new EnableAxisCardSettings();
    colorSelector = new ColorSelectorCardSettings();
    cards: Card[] = [this.enableAxis, this.colorSelector];

    /**
     * populate colorSelector object categories formatting properties
     * @param dataPoints 
     */
    populateColorSelector(dataPoints: BarChartDataPoint[]) {
        const slices: Slice[] = this.colorSelector.slices;
        if (dataPoints) {
            dataPoints.forEach(dataPoint => {
                slices.push(new ColorPicker({
                    name: "fill",
                    displayName: dataPoint.category,
                    value: { value: dataPoint.color },
                    selector: dataPoint.selectionId.getSelector(),
                }));
            });
        }
    }
}

Compile e crie o modelo de serviço de configurações de formatação no método de construtor do visual. O serviço de configurações de formatação recebe as configurações de formato de barChart e as converte em um objeto FormattingModel retornado na API getFormattingModel.

Para usar o recurso de localização, adicione o gerenciador de localização ao serviço de configurações de formatação.

    import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
    
    // ...
    // declare utils formatting settings service
    private formattingSettingsService: FormattingSettingsService;
    //...

    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        const localizationManager = this.host.createLocalizationManager();
        this.formattingSettingsService = new FormattingSettingsService(localizationManager);
        
        // Add here rest of your custom visual constructor code
    }

Atualize o modelo de configurações de formatação usando a API de atualização. Chame a API de Atualização sempre que uma propriedade de formatação no painel de propriedades for alterada. Crie pontos de dados de seletores de gráfico de barras e preencha-os no modelo de configurações de formatação:

    // declare formatting settings model for bar chart 
    private formattingSettings: BarChartSettingsModel;

    // ...

    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(BarChartSettingsModel, options.dataViews[0]);
        this.barDataPoints = createSelectorDataPoints(options, this.host);
        this.formattingSettings.populateColorSelector(this.barDataPoints);

        // Add the rest of your custom visual update API code here

    }

Por fim, a nova API getFormattingModel é uma linha de código simples usando o serviço de configurações de formatação e o modelo de configurações de formatação atual criado na API de atualização acima.

    public getFormattingModel(): powerbi.visuals.FormattingModel {
        return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
    }

(Opcional) Renderização do eixo X (objetos estáticos)

Você pode adicionar objetos ao painel Propriedade para personalizar ainda mais o visual. Essas personalizações podem ser alterações de interface do usuário ou alterações relacionadas aos dados que foram consultados.

Você pode ativar ou desativar esses objetos no painel Propriedade.

Este exemplo renderiza um eixo X no gráfico de barras como um objeto estático.

Já adicionamos a propriedade enableAxis ao arquivo capabilities e à interface barChartSettings.

(Opcional) Adicionar cor (objetos associados a dados)

Os objetos associados a dados são semelhantes aos objetos estáticos, mas normalmente lidam com a seleção de dados. Por exemplo, você pode usar objetos associados a dados para selecionar interativamente a cor associada a cada ponto de dados.

Já definimos o objeto colorSelector no arquivo capabilities.

Cada ponto de dados é representado por uma cor diferente. Incluímos cor na interface BarChartDataPointe atribuímos uma cor padrão a cada ponto de dados quando ele é definido em IVisualHost.

function getColumnColorByIndex(
    category: DataViewCategoryColumn,
    index: number,
    colorPalette: ISandboxExtendedColorPalette,
): string {
    if (colorPalette.isHighContrast) {
        return colorPalette.background.value;
    }

    const defaultColor: Fill = {
        solid: {
            color: colorPalette.getColor(`${category.values[index]}`).value,
        }
    };

    const prop: DataViewObjectPropertyIdentifier = {
        objectName: "colorSelector",
        propertyName: "fill"
    };

    let colorFromObjects: Fill;
    if(category.objects?.[index]){
        colorFromObjects = dataViewObjects.getValue(category?.objects[index], prop);
    }

    return colorFromObjects?.solid.color ?? defaultColor.solid.color;
}

function getColumnStrokeColor(colorPalette: ISandboxExtendedColorPalette): string {
    return colorPalette.isHighContrast
        ? colorPalette.foreground.value
        : null;
}

function getColumnStrokeWidth(isHighContrast: boolean): number {
    return isHighContrast
        ? 2
        : 0;
}

O serviço colorPalette, na função createSelectorDataPoints, gerencia essas cores. Como o createSelectorDataPoints itera em cada um dos pontos de dados, é um lugar ideal para atribuir objetos categóricos como cor.

Para obter instruções em mais detalhadas sobre como adicionar cor ao gráfico de barras, vá para Adicionar cores ao seu visual do Power BI.

Observação

Verifique se o seu arquivo barChart.ts final é semelhante a este código-fonte barChart.ts ou baixe o código-fonte barChart.ts e use-o para substituir o arquivo.

Testar o visual

Execute o visual no servidor do Power BI para ver sua aparência:

1. No PowerShell, navegue até a pasta do projeto e inicie o aplicativo de desenvolvimento.

   pbiviz start
   

   Agora o visual é executado enquanto é hospedado no computador.

   Importante

   Não feche a janela do PowerShell até o final do tutorial. Para interromper a execução do visual, digite Ctrl+C e, se for solicitado a encerrar o trabalho em lote, digite Y e, em seguida Enter.

2. Confira o visual no serviço do Power BI selecionando o Visual do desenvolvedor no painel Visualização.

   

3. Adicionar dados ao visual

   

4. Arraste as bordas do visual para alterar o tamanho e observe como a escala se ajusta.

5. Ativar e desativar o eixo X.

   

6. Altere as cores das diferentes categorias.

Adicionar outros recursos

Personalize ainda mais seu visual adicionando mais recursos. Você pode adicionar recursos que aumentam a funcionalidade do visual, aprimoram ou dão ao usuário mais controle sobre a aparência dele. Por exemplo, você pode:

• Adicionar seleção e interações com outros visuais
• Adicionar um controle deslizante do painel de propriedades que controla a opacidade
• Adicionar suporte para dicas de ferramentas
• Adicionar uma página de aterrissagem
• Adicionar suporte ao idioma local

Empacotar o visual

Para carregar seu visual no Power BI Desktop ou compartilhá-lo com a comunidade na Galeria de Visuais do Power BI, você deve empacotá-lo.

Para preparar o visual para compartilhamento, siga as instruções em Empacotar um visual do Power BI.

Observação

Para obter o código-fonte completo de um gráfico de barras com mais recursos, incluindo dicas de ferramentas e um menu de contexto, confira o gráfico de barras de amostra de visuais do Power BI.

Conteúdo relacionado

• Adicionar um menu de contexto a um visual
• Adicionar uma página de aterrissagem a um visual
• Adicionar suporte à localidade