Megosztás a következőn keresztül:

Oktatóanyag: Sávdiagram létrehozása

  • Cikk

Ez az oktatóanyag bemutatja, hogyan fejleszthet olyan Power BI-vizualizációt, amely egyszerű sávdiagram formájában jeleníti meg az adatokat. Ez a vizualizáció minimális testreszabást támogat. A dokumentáció egyéb oldalai ismertetik, hogyan adhat hozzá további testreszabásokat, például helyi menüket, eszköztippeket és egyebeket.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • A vizualizáció képességeinek meghatározása
  • A vizualizációk létrehozásához használt forráskód ismertetése
  • A vizualizáció megjelenítése
  • Objektumok hozzáadása a tulajdonságok panelhez
  • A vizualizáció csomagolása

Saját környezet beállítása

A Power BI-vizualizáció fejlesztése előtt ellenőrizze, hogy minden szerepel-e a szakaszban.

Feljegyzés

Ha a D3 JavaScript-kódtár nem lett telepítve a telepítés részeként, telepítse most. Futtassa a PowerShellből npm i d3@latest --save

A sávdiagram-vizualizáció létrehozása a következő lépésekkel jár:

  1. Új projekt létrehozása
  2. A képességek fájljának meghatározása –capabilities.json
  3. A visual API létrehozása
  4. A vizualizáció csomagolása – pbiviz.json

Új projekt létrehozása

Ennek az oktatóanyagnak a célja, hogy segítsen megérteni a vizualizáció strukturált és írott módját. Ezeket az utasításokat követve létrehozhat egy vonalkódos vizualizációt az alapoktól, vagy klónozhatja a forráskódtárat , és használhatja a követési gombra anélkül, hogy saját vizualizációt hoz létre.

  1. Nyissa meg a PowerShellt , és keresse meg azt a mappát, amelyben létre szeretné hozni a projektet.

  2. Írja be az alábbi parancsot:

    pbiviz new BarChart

    Most már rendelkeznie kell egy BarChart nevű mappával, amely tartalmazza a vizualizáció fájljait .

  3. A VS Code-ban nyissa meg a [tsconfig.json] (visual-project-structure.md#tsconfigjson) fájlt, és módosítsa a "files" nevét "src/barChart.ts" értékre.

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

    A tsconfig.json "files" objektum arra a fájlra mutat, amelyben a vizualizáció fő osztálya található.

    Az utolsó tsconfig.json fájlnak így kell kinéznie.

  4. A package.json fájl a projektfüggőségek listáját tartalmazza. Cserélje le a package.json fájlt erre a fájlra.

Most már rendelkeznie kell egy új mappával a vizualizációhoz a következő fájlokkal és mappákkal:

Képernyőkép a vizualizációk szerkezetéről.

Az egyes fájlok funkciójának részletes magyarázatát a Power BI-vizualizációs projektstruktúrában találja.

Ebben az oktatóanyagban két fájlra összpontosítunk: a capabilities.json fájl, amely leírja a vizualizációt a gazdagépnek, valamint az src/barchart.ts fájl, amely tartalmazza a vizualizáció API-ját.

Képességek definiálása

A capabilities.json fájlban kötjük az adatokat a gazdagéphez. Ismertetjük, hogy milyen adatmezőket fogad el, és milyen funkciókkal kell rendelkeznie a vizualizációnak.

Képernyőkép a mezőgyűjtőben lévő adatok kötéséről.

Adatszerepkörök definiálása

A változók a képességfájl szakaszában dataRoles vannak definiálva és kötve. Azt szeretnénk, hogy a sávdiagram két változótípust fogadjon el:

  • A diagram különböző sávjai által ábrázolt kategorikus adatok
  • Numerikus vagy mért adatok, amelyeket az egyes sávok magassága jelöl

A Visual Studio Code capabilities.json fájljában ellenőrizze, hogy a következő JSON-töredék megjelenik-e a "dataRoles" címkével ellátott objektumban.

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

Az adatok leképezése

Ezután adja hozzá az adatleképezést , hogy meg tudja mondani a gazdagépnek, hogy mit tegyen ezekkel a változókkal:

Cserélje le a "dataViewMappings" objektum tartalmát a következő kódra:

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

A fenti kód létrehozza azokat a "feltételeket", amelyeket minden adatszerepkör-objektum egyszerre csak egy mezőt tartalmazhat. Figyelje meg, hogy az adatszerepkör belső name használatával hivatkozunk az egyes mezőkre.

A kategorikus adatleképezést is beállítja, hogy minden mező a megfelelő változóhoz legyen megfeleltetve.

Objektumok definiálása a tulajdonságok panelen

A képességfájl "objektumok" szakaszában definiáljuk a formázási panelen megjelenő testreszabható funkciókat. Ezek a funkciók nem befolyásolják a diagram tartalmát, de megváltoztathatják annak megjelenését és megjelenését.

Az objektumokról és azok működéséről további információt az Objektumok című témakörben talál.

Az alábbi objektumok nem kötelezőek. Vegye fel őket, ha az oktatóanyag választható szakaszait szeretné végighaladni, hogy színeket adjon hozzá és megjelenítse az X tengelyt.

Cserélje le az "objektumok" szakasz tartalmát a következő kódra:

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

Mentse a capabilities.json fájlt.

A végső képességfájlnak az ebben a példában szereplőhöz hasonlóan kell kinéznie.

Visual API

Minden vizualizáció egy olyan osztálysal kezdődik, amely megvalósítja a IVisual felületet. Az src/visual.ts fájl az osztályt tartalmazó alapértelmezett fájl.

Ebben az oktatóanyagban a fájl barChart.ts IVisual hívjuk meg. Töltse le a fájlt , és mentse a /src mappába, ha még nem tette meg. Ebben a szakaszban részletesen áttekintjük ezt a fájlt, és ismertetjük a különböző szakaszokat.

Importálások

A fájl első szakasza importálja a vizualizációhoz szükséges modulokat. Figyelje meg, hogy a Power BI-vizualizációs modulok mellett a d3 kódtárat is importáljuk.

A rendszer a következő modulokat importálja a barChart.ts fájlba:

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

Interfészek

Ezután definiáljuk a vizuális felületeket. A sávdiagram vizualizációjának leírása a következő felülettel történik:

  • BarChartDataPoint

Ez a felület a következőképpen van definiálva:

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

Vizualizáció átalakítása

Most, hogy definiáltuk az adatstruktúrát, le kell képeznünk az adatokat a createSelectorDataPoints függvény használatával. Ez a függvény adatokat fogad az adatnézetből, és átalakítja a vizualizáció által használható formátumra. Ebben az esetben az BarChartDataPoint[] előző szakaszban leírt felületet adja vissza.

A DataView vizualizálandó adatokat tartalmazza. Ezek az adatok különböző formában lehetnek, például kategorikusak vagy táblázatosak. Kategorikus vizualizáció, például sávdiagram létrehozásához használja a kategorikus tulajdonságot a DataView.

Ezt a függvényt a rendszer a vizualizáció frissítésekor hívja meg.

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

Feljegyzés

A barChart.ts fájl következő néhány függvénye a színekkel és az X tengely létrehozásával foglalkozik. Ezek nem kötelezőek, és az oktatóanyagban részletesebben is tárgyaljuk őket. Ez az oktatóanyag a IVisual függvényből folytatódik.

A vizualizáció megjelenítése

Az adatok definiálása után a vizualizációt az interfészt megvalósítóIVisual BarChart osztály használatával jelenítjük meg. A IVisual felület leírása a Visual API oldalán található. Olyan metódust constructor tartalmaz, amely létrehozza a vizualizációt, és egy metódust update , amelyet minden alkalommal meghívnak, amikor a vizualizáció újra betöltődik. A vizualizáció megjelenítése előtt deklarálni kell az osztály tagjait:

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

A vizualizáció létrehozása

A konstruktorfüggvény csak egyszer lesz meghívva, amikor a vizualizáció első alkalommal jelenik meg. Üres SVG-tárolókat hoz létre a sávdiagramhoz és az X tengelyhez. Figyelje meg, hogy a d3 kódtár használatával jeleníti meg az SVG-t.

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

A vizualizáció frissítése

A frissítési metódust minden alkalommal meghívjuk, amikor a vizualizáció mérete vagy valamelyik értéke megváltozik.

Méretezés

Skálázni kell a vizualizációt, hogy a sávok és az aktuális értékek száma illeszkedjen a vizualizáció meghatározott szélességi és magassági korlátaiba. Ez hasonló a Circle-kártya oktatóanyagában szereplő frissítési módszerhez.

A méretezés kiszámításához a scaleLinear tárból d3-scale korábban importált metódusokat és scaleBand metódusokat használjuk.

Az options.dataViews[0].categorical.values[0].maxLocal érték az összes aktuális adatpont legnagyobb értékét tartalmazza. Ez az érték határozza meg az y tengely magasságát. Az x tengely szélességének skálázását az interfész vizualizációhoz barchartdatapoint kötött kategóriáinak száma határozza meg.

Azokban az esetekben, amikor az X tengelyt renderelik, ez a vizualizáció szótöréseket is kezel, ha nincs elég hely az X tengely teljes nevének kiírásához.

Egyéb frissítési funkciók

A skálázás mellett a frissítési módszer a kijelöléseket és a színeket is kezeli. Ezek a funkciók nem kötelezőek, és ezekről később lesz szó:

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

A tulajdonságok panel kitöltése a formázási modell Utils használatával

A függvény végső metódusa a IVisual következő getFormattingModel. Ez a metódus egy modern formázási panel formázási modellobjektumot hoz létre és ad vissza, amely tartalmazza a formázási panel összes összetevőjét és tulajdonságát. Ezután az objektumot a Formátum panelen helyezi el. Esetünkben a capabilities.json fájlban található "objektumok" szerint formázó kártyákat colorSelectorenableAxis hozunk létre, és azok formázási tulajdonságait show fillis beleértve. Ha a Tulajdonság panelen minden kategóriához színválasztót szeretne hozzáadni, adjon hozzá egy hurkotbarDataPoints, és mindegyikhez adjon hozzá egy új színválasztó formátumtulajdonságot a formázási modellhez.

A formázási modell létrehozásához a fejlesztőnek ismernie kell az összes összetevőjét. Tekintse meg a formátum panel összetevőit a következőben: .Format Pane Tekintse meg getFormattingModel a FormattingModel utils formázási modell adattárának API-ját.

Töltse le a fájlt , és mentse a /src mappába. Deklarálja a formázási tulajdonságokat és azok értékeit egy formázási beállításosztályban:

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

Hozza létre és hozza létre a formázási beállítások szolgáltatásmodelljét a vizualizáció konstruktor metódusában. A formázási beállítások szolgáltatás megkapja a barChart formátumbeállításait, és átalakítja őket az API-ban getFormattingModel visszaadott FormattingModel-objektummá.

A honosítási funkció használatához adja hozzá a honosítás-kezelőt a formázási beállítások szolgáltatáshoz.

    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
    }

Frissítse a formázási beállítások modelljét az Update API használatával. Hívja meg az Update API-t minden alkalommal, amikor módosít egy formázási tulajdonságot a tulajdonságok panelen. Sávdiagram-választók adatpontok létrehozása és feltöltése a formázási beállítások modelljében:


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

    }

Végül az új API getFormattingModel egy egyszerű kódsor, amely a fenti frissítési API-ban létrehozott formázási beállításokat és formátumbeállításokat használó modellt használja.

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

(Nem kötelező) Az X tengely renderelése (statikus objektumok)

A vizualizáció további testreszabásához hozzáadhat objektumokat a Tulajdonság panelhez. Ezek a testreszabások lehetnek a felhasználói felület módosításai vagy a lekérdezett adatokhoz kapcsolódó módosítások.

Ezeket az objektumokat be- és kikapcsolhatja a Tulajdonság panelen.

Képernyőkép az objektumokról a Tulajdonság panelen.

Ez a példa egy X tengelyt jelenít meg a sávdiagramon statikus objektumként.

A tulajdonságot már hozzáadtuk a enableAxis képességfájlhoz és a barChartSettings felülethez.

(Nem kötelező) Szín hozzáadása (adathoz kötött objektumok)

Az adathoz kötött objektumok hasonlóak a statikus objektumokhoz, de általában az adatkijelöléssel foglalkoznak. Az adathoz kötött objektumok használatával például interaktívan kiválaszthatja az egyes adatpontokkal társított színeket.

Képernyőkép a tulajdonságok színkijelöléséről.

Már definiáltuk az colorSelector objektumot a képességfájlban .

Minden adatpontot más szín jelöl. A BarChartDataPoint felületén színt is belefoglalunk, és az egyes adatpontokhoz az alapértelmezett színt rendeljük hozzá, amikor meg van adva.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;
}

A colorPalette szolgáltatás a függvényben kezeli ezeket a createSelectorDataPoints színeket. Mivel createSelectorDataPoints minden adatponton végigfut, ideális hely kategorikus objektumok, például színek hozzárendelésére.

A sávdiagram színeinek hozzáadására vonatkozó részletes útmutatásért olvassa el a Színek hozzáadása a Power BI-vizualizációhoz című témakört.

Feljegyzés

Ellenőrizze, hogy az utolsó barChart.ts fájl így néz-e ki, barChart.ts forráskódot, vagy töltse le a barChart.ts forráskódot, és használja a fájl cseréjéhez.

A vizualizáció tesztelése

Futtassa a vizualizációt a Power BI-kiszolgálón , hogy lássa, hogyan néz ki:

  1. A PowerShellben lépjen a projekt mappájába, és indítsa el a fejlesztőalkalmazást.

    pbiviz start

    A vizualizáció a számítógépen való üzemeltetés közben fut.

    Fontos

    Az oktatóanyag végéig ne zárja be a PowerShell-ablakot . A vizualizáció futtatásának leállításához írja be a Ctrl C billentyűkombinációt+, és ha a rendszer kéri a kötegelt feladat leállítását, írja be az Y, majd az Enter parancsot.

  2. Tekintse meg a vizualizációt Power BI szolgáltatás a Vizualizáció panel fejlesztői vizualizációjának kiválasztásával.

    Képernyőkép a fejlesztői vizualizációról.

  3. Adatok hozzáadása a vizualizációhoz

    Képernyőkép a mezőgyűjtőhöz kötött adatokról.

  4. A méret módosításához húzza a vizualizáció széleit, és figyelje meg, hogyan változik a méretezés.

  5. Kapcsolja be és ki az X tengelyt.

    Képernyőkép az X tengelyről a tulajdonságpanelen.

  6. A különböző kategóriák színeinek módosítása.

Egyéb funkciók hozzáadása

További funkciók hozzáadásával tovább testre szabhatja a vizualizációt. Hozzáadhat olyan funkciókat, amelyek növelik a vizualizáció funkcióit, javítják annak megjelenését és hangulatát, vagy nagyobb ellenőrzést biztosítanak a felhasználó számára a megjelenés felett. Lehetőség van például a következőkre:

A vizualizáció csomagolása

Mielőtt betöltené a vizualizációt a Power BI Desktopba, vagy megosztaná a közösséggel a Power BI Visual Galleryben, csomagolnia kell.

A vizualizáció megosztására való előkészítéséhez kövesse a Power BI-vizualizáció csomagjában található utasításokat.

Feljegyzés

Egy sávdiagram teljes forráskódja további funkciókkal, például eszköztippekkel és helyi menüvel: Power BI-vizualizációk mintasávdiagramja.

Kapcsolódó tartalom