Självstudie: Skapa ett stapeldiagram

Den här självstudien visar hur du utvecklar ett visuellt Power BI-objekt som visar data i form av ett enkelt stapeldiagram. Det här visuella objektet har stöd för en minimal anpassning. Andra sidor i den här dokumentationen förklarar hur du lägger till ytterligare anpassning som snabbmenyer, verktygstips med mera.

I den här självstudien lär du dig att:

• Definiera funktionerna i ditt visuella objekt
• Förstå källkoden som används för att skapa ett visuellt objekt
• Rendera det visuella objektet
• Lägga till objekt i egenskapsfönstret
• Paketera det visuella objektet

Konfigurera din miljö

Innan du börjar utveckla ditt visuella Power BI-objekt kontrollerar du att allt visas i det här avsnittet.

• Ett Power BI Pro- eller Premium per användare-konto (PPU). Om du inte har någon kan du registrera dig för en kostnadsfri utvärderingsversion.

• Visual Studio Code (VS Code). VS Code är en idealisk IDE (Integrated Development Environment) för utveckling av JavaScript- och TypeScript-program.

• Windows PowerShell version 4 eller senare (för Windows). Eller terminal (för OSX).

• En miljö som är redo att utveckla ett visuellt Power BI-objekt. Konfigurera din miljö för att utveckla ett visuellt Power BI-objekt.

• I den här självstudien används rapporten försäljningsanalys i USA. Du kan ladda ned den här rapporten och ladda upp den till usluga Power BI eller använda din egen rapport. Om du behöver mer information om usluga Power BI och uppladdning av filer kan du läsa självstudien Kom igång med att skapa i usluga Power BI.

Kommentar

Om D3 JavaScript-biblioteket inte har installerats som en del av installationen installerar du det nu. Från PowerShell kör du npm i d3@latest --save

När du skapar ett visuellt stapeldiagram ingår följande steg:

1. Skapa ett nytt projekt
2. Definiera funktionsfilen –capabilities.json
3. Skapa det visuella API:et
4. Paketera ditt visuella objekt – pbiviz.json

Skapa ett nytt projekt

Syftet med den här självstudien är att hjälpa dig att förstå hur ett visuellt objekt är strukturerat och skrivet. Du kan följa de här anvisningarna för att skapa ett visuellt streckkodsobjekt från grunden, eller så kan du klona källkodslagringsplatsen och använda den för att följa med utan att skapa ett eget visuellt objekt.

Skapa ett nytt visuellt objekt

1. Öppna PowerShell och navigera till mappen som du vill skapa projektet i.

2. Ange följande kommando:

   pbiviz new BarChart
   

   Nu bör du ha en mapp med namnet BarChart som innehåller det visuella objektets filer.

3. Öppna filen [tsconfig.json] (visual-project-structure.md#tsconfigjson) i VS Code och ändra namnet på "files" till "src/barChart.ts".

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

   Objektet tsconfig.json "files" pekar på filen där huvudklassen för det visuella objektet finns.

   Den sista tsconfig.json filen bör se ut så här.

4. Filen package.json innehåller en lista över projektberoenden. Ersätt din package.json-fil med den här.

Klona källkod

git clone

Nu bör du ha en ny mapp för ditt visuella objekt med följande filer och mappar:

En detaljerad förklaring av funktionen för var och en av dessa filer finns i Projektstruktur för visuella Power BI-objekt.

De två filer som vi fokuserar på i den här självstudien är filen capabilities.json , som beskriver det visuella objektet för värden och filen src/barchart.ts , som innehåller det visuella objektets API.

Definiera funktioner

Den capabilities.json filen är där vi binder data till värden. Vi beskriver vilken typ av datafält det accepterar och vilka funktioner det visuella objektet ska ha.

Definiera dataroller

Variabler definieras och binds i dataRoles avsnittet i funktionsfilen. Vi vill att vårt stapeldiagram ska acceptera två typer av variabler:

• Kategoriska data som representeras av de olika staplarna i diagrammet
• Numeriska eller uppmätta data, som representeras av höjden på varje stapel

I Visual Studio Code i filen capabilities.json kontrollerar du att följande JSON-fragment visas i objektet "dataRoles".

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

Mappa data

Lägg sedan till datamappning för att tala om för värden vad de ska göra med dessa variabler:

Ersätt innehållet i objektet "dataViewMappings" med följande kod:

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

Koden ovan skapar de "villkor" som varje datarollobjekt bara kan innehålla ett fält i taget. Observera att vi använder datarollens interna name för att referera till varje fält.

Den anger också kategorisk datamappning så att varje fält mappas till rätt variabel.

Definiera objekt för egenskapsfönstret

Avsnittet "objekt" i funktionsfilen är där vi definierar de anpassningsbara funktioner som ska visas i formatfönstret. De här funktionerna påverkar inte innehållet i diagrammet, men de kan ändra dess utseende och känsla.

Mer information om objekt och hur de fungerar finns i Objekt.

Följande objekt är valfria. Lägg till dem om du vill gå igenom de valfria avsnitten i den här självstudien för att lägga till färger och återge X-axeln.

Ersätt innehållet i avsnittet "objekt" med följande kod:

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

Spara filen capabilities.json .

Din sista funktionsfil bör se ut som den i det här exemplet.

Visuellt API

Alla visuella objekt börjar med en klass som implementerar IVisual gränssnittet. Filen src/visual.ts är standardfilen som innehåller den här klassen.

I den här självstudien anropar vi filen IVisualbarChart.ts. Ladda ned filen och spara den i mappen /src , om du inte redan har gjort det. I det här avsnittet går vi igenom den här filen i detalj och beskriver de olika avsnitten.

Importer

Det första avsnittet i filen importerar de moduler som behövs för det här visuella objektet. Observera att förutom de visuella Power BI-modulerna importerar vi även d3-biblioteket.

Följande moduler importeras till din barChart.ts-fil :

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";

Gränssnitt

Därefter definierar vi de visuella gränssnitten. Följande gränssnitt används för att beskriva vårt visuella stapeldiagram:

• BarChartDataPoint

Det här gränssnittet definieras på följande sätt:

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

Visuell transformering

Nu när datastrukturen har definierats måste vi mappa data till den med hjälp av createSelectorDataPoints funktionen . Den här funktionen tar emot data från datavyn och omvandlar dem till ett format som det visuella objektet kan använda. I det här fallet returneras BarChartDataPoint[] gränssnittet som beskrivs i föregående avsnitt.

DataView Innehåller de data som ska visualiseras. Dessa data kan vara i olika former, till exempel kategoriska eller tabellbaserade. Om du vill skapa ett kategoriskt visuellt objekt som ett stapeldiagram använder du den kategoriska egenskapen på DataView.

Den här funktionen anropas när det visuella objektet uppdateras.

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

Kommentar

De kommande funktionerna i barChart.ts-filen hanterar färg och skapar X-axeln. De är valfria och beskrivs längre ned i den här självstudien. Den här självstudien IVisual fortsätter från funktionen.

Rendera det visuella objektet

När data har definierats renderar vi det visuella objektet med hjälp av klassen BarChart som implementerarIVisual gränssnittet. Gränssnittet IVisual beskrivs på sidan Visuellt API . Den innehåller en constructor metod som skapar det visuella objektet och en update metod som anropas varje gång det visuella objektet laddas in igen. Innan vi återger det visuella objektet måste vi deklarera medlemmarna i klassen:

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

Konstruera det visuella objektet

Konstruktorfunktionen anropas bara en gång när det visuella objektet återges för första gången. Den skapar tomma SVG-containrar för stapeldiagrammet och X-axeln. Observera att det använder d3-biblioteket för att återge 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);
    }

Uppdatera det visuella objektet

Uppdateringsmetoden anropas varje gång det visuella objektets storlek eller något av dess värden ändras.

Skalning

Vi måste skala det visuella objektet så att antalet staplar och aktuella värden passar in i det visuella objektets definierade bredd- och höjdgränser. Detta liknar uppdateringsmetoden i självstudien Circle-kort.

För att beräkna skalan använder vi metoderna scaleLinear och scaleBand som importerades tidigare från d3-scale biblioteket.

Värdet options.dataViews[0].categorical.values[0].maxLocal innehåller det största värdet för alla aktuella datapunkter. Det här värdet används för att fastställa höjden på y-axeln. Skalningen för bredden på x-axeln bestäms av antalet kategorier som är bundna till det visuella objektet i barchartdatapoint gränssnittet.

I de fall där X-axeln återges hanterar det här visuella objektet även ordbrytningar om det inte finns tillräckligt med utrymme för att skriva ut hela namnet på X-axeln.

Andra uppdateringsfunktioner

Förutom skalning hanterar uppdateringsmetoden även val och färger. Dessa funktioner är valfria och beskrivs senare:

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

Fyll i egenskapsfönstret med formateringsmodellen Utils

Den sista metoden i IVisual funktionen är getFormattingModel. Den här metoden skapar och returnerar ett formateringsmodellobjekt i modernt format som innehåller alla formatfönsterkomponenter och egenskaper. Objektet placeras sedan i fönstret Format . I vårt fall skapar vi formatkort för enableAxis och colorSelector, inklusive formateringsegenskaper för show och fill, enligt "objekt" i filen capabilities.json . Om du vill lägga till en färgväljare för varje kategori i egenskapsfönstret lägger du till en for-loop på barDataPoints och lägger till en ny färgväljarformategenskap i formateringsmodellen.

För att skapa en formateringsmodell bör utvecklaren känna till alla dess komponenter. Kolla in komponenterna i formatfönstret i Format Pane. getFormattingModel Kolla in API:et för FormattingModel utils lagringsplatsen i formateringsmodellen.

Ladda ned filen och spara den i mappen /src . Deklarera formateringsegenskaper och deras värden i en formateringsinställningsklass:

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

Skapa och skapa formateringsinställningarnas tjänstmodell i det visuella objektets konstruktormetod . Tjänsten formateringsinställningar tar emot inställningarna för barChart-format och konverterar dem till ett FormattingModel-objekt som returneras i API:et getFormattingModel .

Om du vill använda lokaliseringsfunktionen lägger du till lokaliseringshanteraren i tjänsten formateringsinställningar.

    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
    }

Uppdatera formateringsinställningsmodellen med hjälp av uppdaterings-API: et. Anropa uppdaterings-API:et varje gång en formateringsegenskap i egenskapsfönstret ändras. Skapa stapeldiagramväljardatapunkter och fyll i dem i formateringsinställningsmodellen:

    // 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

    }

Slutligen är det nya APIgetFormattingModel:et en enkel kodrad med hjälp av formateringsinställningstjänsten och den aktuella formateringsinställningsmodellen som skapades i uppdaterings-API:et ovan.

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

(Valfritt) Rendera X-axeln (statiska objekt)

Du kan lägga till objekt i egenskapsfönstret för att anpassa det visuella objektet ytterligare. Dessa anpassningar kan vara ändringar i användargränssnittet eller ändringar relaterade till de data som efterfrågades.

Du kan aktivera eller inaktivera dessa objekt i fönstret Egenskap .

I det här exemplet återges en X-axel i stapeldiagrammet som ett statiskt objekt.

Vi har redan lagt till enableAxis egenskapen i funktionsfilen och barChartSettings-gränssnittet.

(Valfritt) Lägg till färg (databundna objekt)

Databundna objekt liknar statiska objekt, men hanterar vanligtvis dataval. Du kan till exempel använda databundna objekt för att interaktivt välja den färg som är associerad med varje datapunkt.

Vi har redan definierat objektet colorSelector i funktionsfilen .

Varje datapunkt representeras av en annan färg. Vi inkluderar färg i BarChartDataPoint-gränssnittet och tilldelar en standardfärg till varje datapunkt när den definieras i 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;
}

Tjänsten colorPalette hanterar dessa färger i createSelectorDataPoints funktionen. Eftersom createSelectorDataPoints itererar genom var och en av datapunkterna är det en idealisk plats att tilldela kategoriska objekt som färg.

Mer detaljerade instruktioner om hur du lägger till färg i stapeldiagrammet finns i Lägga till färger i ditt visuella Power BI-objekt.

Kommentar

Kontrollera att den sista barChart.ts filen ser ut så här barChart.ts källkoden, eller ladda ned barChart.ts källkod och använd den för att ersätta filen.

Testa det visuella objektet

Kör det visuella objektet på Power BI-servern för att se hur det ser ut:

1. I PowerShell navigerar du till projektets mapp och startar utvecklingsappen.

   pbiviz start
   

   Det visuella objektet körs nu när det finns på datorn.

   Viktigt!

   Stäng inte PowerShell-fönstret förrän du har avslutat självstudien. Om du vill hindra det visuella objektet från att köras anger du Ctrl+C, och om du uppmanas att avsluta batchjobbet anger du Y och sedan Retur.

2. Visa det visuella objektet i usluga Power BI genom att välja det visuella objektet Utvecklare i fönstret Visualisering.

   

3. Lägga till data i det visuella objektet

   

4. Dra i kanterna på det visuella objektet om du vill ändra storlek och se hur skalan justeras.

5. Aktivera och inaktivera X-axeln.

   

6. Ändra färgerna i de olika kategorierna.

Lägga till andra funktioner

Du kan anpassa ditt visuella objekt ytterligare genom att lägga till fler funktioner. Du kan lägga till funktioner som ökar det visuella objektets funktioner, förbättrar dess utseende och känsla eller ger användaren mer kontroll över dess utseende. Du kan till exempel:

• Lägg till markering och interaktioner med andra visuella objekt
• Lägg till ett skjutreglage för egenskapsfönstret som styr opaciteten
• Lägga till stöd för knappbeskrivningar
• Lägga till en landningssida
• Lägg till stöd för lokalt språk

Paketera det visuella objektet

Innan du kan läsa in ditt visuella objekt i Power BI Desktop eller dela det med communityn i Power BI Visual Gallery måste du paketera det.

Följ anvisningarna i Paketera ett visuellt Power BI-objekt för att förbereda det visuella objektet för delning.

Kommentar

Den fullständiga källkoden för ett stapeldiagram med fler funktioner, inklusive verktygstips och en snabbmeny, finns i Exempelstapeldiagram för visuella Power BI-objekt.

Relaterat innehåll

• Lägga till en snabbmeny i ett visuellt objekt
• Lägga till en landningssida i ett visuellt objekt
• Lägg till språkstöd