Opetusohjelma: Palkkikaavion luominen

  • Artikkeli

Tässä opetusohjelmassa kerrotaan, miten voit kehittää Power BI -visualisoinnin, joka näyttää tiedot yksinkertaisen palkkikaavion muodossa. Tämä visualisointi tukee vähäistä määrää mukauttamista. Tämän ohjeen muilla sivuilla selitetään, miten voit lisätä mukautuksia, kuten pikavalikot, työkaluvihjeet ja paljon muuta.

Tässä opetusohjelmassa opit:

  • Visualisoinnin ominaisuuksien määrittäminen
  • Visualisoinnin lähdekoodin ymmärtäminen
  • Visualisoinnin hahmontaminen
  • Lisää objekteja Ominaisuudet-ruutuun
  • Visualisoinnin pakkaaminen

Ympäristön määrittäminen

Ennen kuin aloitat Power BI -visualisoinnin kehittämisen, varmista, että sinulla on kaikki tässä osiossa lueteltu.

Muistiinpano

Jos D3:n JavaScript-kirjastoa ei ole asennettu osana asennustasi, asenna se nyt. Suorita PowerShellistä npm i d3@latest --save

Palkkikaaviovisualisoinnin luomiseen liittyy seuraavat vaiheet:

  1. Luo uusi projekti
  2. Ominaisuustiedoston määrittäminen –capabilities.json
  3. Visualisoinnin ohjelmointirajapinnan luominen
  4. Visualisoinnin pakkaaminen -pbiviz.json

Luo uusi projekti

Tämän opetusohjelman tarkoituksena on auttaa ymmärtämään, miten visualisointi on jäsennetty ja kirjoitettu. Näiden ohjeiden avulla voit luoda viivakoodivisualisoinnin alusta alkaen tai kloonata lähdekoodisäilön ja käyttää sitä apuna luomatta omaa visualisointiasi.

  1. Avaa PowerShell ja siirry kansioon, johon haluat luoda projektisi.

  2. Anna seuraava komento:

    pbiviz new BarChart

    Sinulla pitäisi nyt olla kansio nimeltä BarChart, joka sisältää visualisoinnin tiedostot.

  3. Avaa VS Codessa [tsconfig.json] (visual-project-structure.md#tsconfigjson) -tiedosto ja vaihda tiedoston "files" nimeksi "src/barChart.ts".

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

    tsconfig.json "files" -objekti osoittaa tiedostoon, jossa visualisoinnin pääluokka sijaitsee.

    Viimeisen tsconfig.json tiedoston pitäisi näyttää tältä.

  4. package.json tiedosto sisältää luettelon projektin riippuvuuksista. Korvaa package.json tiedosto tällä.

Sinulla pitäisi nyt olla visualisoinnille uusi kansio, joka sisältää seuraavat tiedostot ja kansiot:

Näyttökuvassa näkyy visualisointien rakenne.

Yksityiskohtainen kuvaus kunkin tiedoston toiminnosta on kohdassa Power BI -visualisoinnin projektirakenne.

Kaksi tiedostoa, joihin keskitymme tässä opetusohjelmassa, ovat capabilities.json -tiedosto, joka kuvaa visualisoinnin isännälle, sekä src/barchart.ts-tiedosto , joka sisältää visualisoinnin ohjelmointirajapinnan.

Ominaisuuksien määrittäminen

capabilities.json-tiedostoon sidotaan tietoja isäntään. Kuvailemme, millaisia tietokenttiä se hyväksyy ja mitä ominaisuuksia visualisoinnissa tulisi olla.

Näyttökuva, joka esittää tietojen sitomista kenttäsäilöön.

Tietoroolien määrittäminen

Muuttujat määritetään ja sidotaan dataRoles ominaisuustiedoston -osassa. Haluamme, että palkkikaavio hyväksyy kahdentyyppisiä muuttujia:

  • Kaavion eri palkeissa edustettuina olevat luokittaiset tiedot
  • Numeerisia tai mitattuja tietoja, joita edustaa kunkin palkin korkeus

Vahvista Visual Studio Codessa capabilities.json-tiedostossa, että seuraava JSON-koodiosa näkyy "dataRoles"-nimisessa objektissa.

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

Määritä tietojen vastaavuus

Lisää seuraavaksi tietojen yhdistämismääritys , joka kertoo isännälle, mitä tehdä näillä muuttujilla:

Korvaa dataViewMappings-objektin sisältö seuraavalla koodilla:

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

Yllä oleva koodi luo ehdot, joita kukin tietorooliobjekti voi sisältää vain yhden kentän kerrallaan. Huomaa, että käytämme tietoroolin sisäistä name viittaamaan kuhunkin kenttään.

Se myös määrittää luokittaisen tietojen yhdistämismäärityksen niin, että kukin kenttä yhdistetään oikeaan muuttujaan.

Objektien määrittäminen Ominaisuudet-ruudulle

Ominaisuustiedoston Objektit-osassa määritetään mukautettavat ominaisuudet, joiden pitäisi näkyä muotoiluruudussa. Nämä ominaisuudet eivät vaikuta kaavion sisältöön, mutta ne voivat muuttaa sen ulkoasua.

Lisätietoja objekteista ja niiden toiminnasta on kohdassa Objektit.

Seuraavat objektit ovat valinnaisia. Lisää ne, jos haluat käyttää tämän opetusohjelman valinnaisia osioita värien lisäämiseksi ja X-akselin hahmontamiseksi.

Korvaa "objektit"-osion sisältö seuraavalla koodilla:

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

Tallenna capabilities.json tiedosto.

Lopullisen ominaisuustiedoston pitäisi näyttää samalta kuin tässä esimerkissä.

Visualisoinnin ohjelmointirajapinta

Kaikki visualisoinnit alkavat luokalla, joka ottaa käyttöön -liittymän IVisual . src/visual.ts-tiedosto on oletustiedosto, joka sisältää tämän luokan.

Tässä opetusohjelmassa annamme tiedostollemme IVisualbarChart.ts. Lataa tiedosto ja tallenna se /src-kansioon , jos et ole tehnyt niin jo. Tässä osiossa käymme läpi tämän tiedoston yksityiskohtaisesti ja kuvaamme eri osia.

Tuonnit

Tiedoston ensimmäinen osa tuo moduulit, joita tarvitaan tässä visualisoinnissa. Huomaa, että Power BI -visualisointimoduulien lisäksi tuomme myös D3-kirjaston.

Seuraavat moduulit tuodaan barChart.ts -tiedostoon:

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

Liittymät

Seuraavaksi määritetään visuaaliset käyttöliittymät. Palkkikaaviovisualisointia käytetään seuraavan käyttöliittymän avulla:

  • BarChartDataPoint

Tämä liittymä on määritetty seuraavasti:

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

Visualisoinnin muunnos

Nyt kun tietorakenne on määritetty, meidän täytyy yhdistää siihen tietoja -funktion createSelectorDataPoints avulla. Tämä funktio vastaanottaa tietoja tietonäkymästä ja muuntaa ne muotoon, jota visualisointi voi käyttää. Tässä tapauksessa se palauttaa BarChartDataPoint[] edellisessä osiossa kuvatun liittymän.

DataView sisältää visualisoitavat tiedot. Nämä tiedot voivat olla eri muodoissa, kuten luokka- tai taulukkomuodossa. Jos haluat luoda luokittaisen visualisoinnin, kuten palkkikaavion, käytä -kohteen luokittaista ominaisuutta DataView.

Tätä funktiota kutsutaan aina, kun visualisointi päivitetään.

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

Muistiinpano

barChart.ts tiedoston seuraavat funktiot käsittelevät väriä ja luovat X-akselin. Ne ovat valinnaisia, ja niitä käsitellään tarkemmin tässä opetusohjelmassa. Tämä opetusohjelma jatkuu -funktiosta IVisual .

Visualisoinnin hahmontaminen

Kun tiedot on määritetty, visualisointi hahmonnetaan käyttämällä liittymän toteuttavan BarChart-luokanIVisual avulla. IVisual Liittymä on kuvattu Visualisoinnin ohjelmointirajapinnan sivulla. Se sisältää -menetelmän constructor , joka luo visualisoinnin, ja menetelmän update , jota kutsutaan aina, kun visualisointi latataan uudelleen. Ennen visualisoinnin hahmontamista meidän on ilmoitettava luokan jäsenet:

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

Visualisoinnin muodostaminen

Konstruktorifunktiota kutsutaan vain kerran, kun visualisointi hahmonnetaan ensimmäistä kertaa. Se luo tyhjiä SVG-säilöjä palkkikaaviota ja X-akselia varten. Huomaa, että se käyttää d3-kirjastoa SVG:n hahmontamiseen.

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

Visualisoinnin päivittäminen

Päivitysmenetelmää kutsutaan aina, kun visualisoinnin koko tai jokin sen arvoista muuttuu.

Skaalaus

Visualisointia on skaalattava niin, että palkkien ja nykyisten arvojen määrä sopii visualisoinnin määritettyihin leveys- ja korkeusrajoihin. Tämä on samanlainen kuin Circle Card -opetusohjelman päivitysmenetelmä.

Asteikon laskemiseksi käytämme - ja scaleBand -scaleLinearmenetelmiä, jotka tuotiin aiemmin kirjastostad3-scale.

Arvolla options.dataViews[0].categorical.values[0].maxLocal on kaikkien nykyisten arvopisteiden suurin arvo. Tämän arvon avulla määritetään y-akselin korkeus. X-akselin leveyden skaalaus määräytyy sen mukaan, kuinka monta luokkaa visualisointiin barchartdatapoint sidotaan liittymässä.

Tapauksissa, joissa X-akseli on hahmontettu, tämä visualisointi käsittelee myös sananvaihtoja, jos tilaa ei ole riittävästi koko nimen kirjoittamiseen X-akselille.

Muut päivitysominaisuudet

Skaalauksen lisäksi päivitysmenetelmä käsittelee myös valinnat ja värit. Nämä ominaisuudet ovat valinnaisia, ja niitä käsitellään myöhemmin:

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

Ominaisuusruudun täyttäminen muotoilumallin apuohjelmien avulla

Funktion IVisual viimeinen menetelmä on getFormattingModel. Tämä menetelmä luo ja palauttaa modernin muotoiluruudun muotoilumalliobjektin, joka sisältää kaikki muotoiluruudun osat ja ominaisuudet. Sen jälkeen se sijoittaa objektin Muotoilu-ruutuun. Tässä tapauksessa luomme muotoilukortit kohteelle enableAxis ja colorSelector, mukaan lukien muotoiluominaisuudet kohteille show ja fill, capabilities.json tiedoston objektienmukaan. Jos haluat lisätä värinvalitsimen kullekin luokalle Ominaisuus-ruudussa, lisää silmukka käytössä barDataPoints ja lisää kullekin uusi värinvalitsimen muotoiluominaisuus muotoilumalliin.

Muotoilumallin luomiseksi kehittäjän tulee tuntea kaikki sen osat. Tutustu muotoiluruudun osiin kohteessa Format Pane. Tutustu getFormattingModel -ohjelmointirajapintaan FormattingModel utils muotoilumallin apuohjelmien säilössä.

Lataa tiedosto ja tallenna se /src-kansioon . Muotoile muotoiluominaisuudet ja niiden arvot muotoiluasetusten luokassa:

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

Luo ja luo muotoiluasetusten palvelumalli visualisoinnin konstruktorimenetelmässä . Muotoiluasetuspalvelu vastaanottaa barChart-muotoiluasetukset ja muuntaa ne formattingModel-objektiksi, joka palautetaan ohjelmointirajapinnassagetFormattingModel.

Jos haluat käyttää lokalisointiominaisuutta, lisää lokalisointihallinta muotoiluasetusten palveluun.

    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
    }

Päivitä muotoiluasetusmalli päivityksen ohjelmointirajapinnan avulla. Kutsu Päivityksen ohjelmointirajapintaa aina, kun ominaisuudet-ruudun muotoiluominaisuutta muutetaan. Luo palkkikaaviovalitsinten arvopisteet ja täytä ne muotoiluasetusmallissa:


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

    }

Lopuksi uusi ohjelmointirajapinta getFormattingModel on yksinkertainen koodirivi, joka käyttää muotoiluasetusten palvelua ja nykyistä muotoiluasetusmallia, joka luotiin yllä olevassa päivityksen ohjelmointirajapinnassa.

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

(Valinnainen) X-akselin hahmontaminen (staattiset objektit)

Voit lisätä objekteja Ominaisuus-ruutuun visualisoinnin mukauttamiseksi. Nämä mukautukset voivat olla käyttöliittymän muutoksia tai kyselyn kohdetietoihin liittyviä muutoksia.

Voit ottaa nämä objektit käyttöön tai poistaa ne käytöstä Ominaisuus-ruudussa.

Näyttökuva objekteista Ominaisuus-ruudussa.

Tämä esimerkki hahmontaa palkkikaavion X-akselin staattiseksi objektiksi.

Ominaisuustiedostoon enableAxis ja barChart Asetukset-liittymään on jo lisätty ominaisuusominaisuus.

(Valinnainen) Värin lisääminen (tietoihin sidotut objektit)

Tietoihin sidotut objektit muistuttavat staattisia objekteja, mutta ne käsittelevät yleensä tietojen valintaa. Voit esimerkiksi käyttää tietoihin sidottuja objekteja, kun haluat valita vuorovaikutteisesti kuhunkin arvopisteeseen liittyvän värin.

Näyttökuva värin valinnasta ominaisuuksissa.

Olemme jo määrittäneet -objektin colorSelectorominaisuustiedostossa .

Kutakin arvopistettä edustaa eri väri. Sisällytämme värin BarChartDataPoint-käyttöliittymään ja määritämme oletusvärin kullekin arvopisteelle, kun se on määritetty kohteessa 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;
}

- colorPalette funktion createSelectorDataPoints -palvelu hallitsee näitä värejä. Koska createSelectorDataPoints se iteroi kunkin arvopisteiden läpi, se on ihanteellinen paikka määrittää luokittaisia objekteja, kuten väriä.

Tarkempia ohjeita värin lisäämisestä palkkikaavioon saat artikkelista Värien lisääminen Power BI -visualisointiin.

Muistiinpano

Varmista, että lopullinen barChart.ts tiedosto näyttää tältä barChart.ts lähdekoodia, tai lataa barChart.ts lähdekoodi ja käytä sitä tiedoston korvaamiseen.

Visualisoinnin testaaminen

Suorita visualisointi Power BI -palvelimessa, jotta näet, miltä se näyttää:

  1. Siirry PowerShellissä projektin kansioon ja käynnistä kehityssovellus.

    pbiviz start

    Visualisointi on nyt käynnissä, ja sitä isännöidään parhaillaan tietokoneessasi.

    Tärkeä

    Älä sulje PowerShell-ikkunaa ennen opetusohjelman loppua. Jos haluat lopettaa visualisoinnin suorittamisen, paina Ctrl+C ja jos sinua kehotetaan lopettamaan joukkoajo, paina Y ja sitten Enter.

  2. Tarkastele visualisointia Power BI -palvelu valitsemalla Kehittäjä-visualisointi Visualisointi-ruudusta.

    Näyttökuva kehittäjän visualisoinnista.

  3. Tietojen lisääminen visualisointiin

    Näyttökuva kenttäsäilöön sidotuista tiedoista.

  4. Muuta kokoa vetämällä visualisoinnin reunoja ja huomaa, miten asteikko muuttuu.

  5. Ota X-akseli käyttöön tai poista se käytöstä.

    Näyttökuva ominaisuusruudun X-akselista.

  6. Muuta eri luokkien värejä.

Muiden ominaisuuksien lisääminen

Voit mukauttaa visualisointia lisäämällä lisäominaisuuksia. Voit lisätä ominaisuuksia, jotka lisäävät visualisoinnin toimintaa, parantavat sen ulkoasua tai antavat käyttäjälle enemmän hallintaa sen ulkoasuun. Voit esimerkiksi

Visualisoinnin pakkaaminen

Ennen kuin voit ladata visualisoinnin Power BI Desktopiin tai jakaa sen yhteisön Power BI -visualisointien valikoimassa, sinun on pakattava se.

Valmistele visualisointi jakamista varten noudattamalla ohjeita kohdassa Power BI -visualisoinnin pakkaaminen.

Muistiinpano

Jos haluat nähdä lisäominaisuuksia sisältävän palkkikaavion koko lähdekoodin, mukaan lukien työkaluvihjeet ja pikavalikon, katso Power BI -visualisointien esimerkkipalkkikaavio.

Liittyvä sisältö