Zelfstudie: Een staafdiagram maken
In deze zelfstudie leert u hoe u een Power BI-visual ontwikkelt die gegevens weergeeft in de vorm van een eenvoudig staafdiagram. Deze visual ondersteunt een minimale hoeveelheid aanpassing. Op andere pagina's van deze documentatie wordt uitgelegd hoe u verdere aanpassingen kunt toevoegen, zoals contextmenu's, knopinfo en meer.
In deze zelfstudie leert u het volgende:
- De mogelijkheden van uw visual definiëren
- Inzicht in de broncode die wordt gebruikt om een visual te bouwen
- De visual weergeven
- Objecten toevoegen aan het deelvenster Eigenschappen
- De visual verpakken
Uw omgeving instellen
Controleer voordat u begint met het ontwikkelen van uw Power BI-visual of alles in deze sectie wordt vermeld.
Een PPU-account (Power BI Pro of Premium Per User). Als u er geen hebt, kunt u zich registreren voor een gratis proefversie.
Visual Studio Code (VS Code). VS Code is een ideale IDE (Integrated Development Environment) voor het ontwikkelen van JavaScript- en TypeScript-toepassingen.
Windows PowerShell versie 4 of hoger (voor Windows). Of Terminal (voor Mac).
Een omgeving die gereed is voor het ontwikkelen van een Power BI-visual. Stel uw omgeving in voor het ontwikkelen van een Power BI-visual.
In deze zelfstudie wordt gebruikgemaakt van het rapport Us Sales Analysis . U kunt dit rapport downloaden en uploaden naar Power BI-service of uw eigen rapport gebruiken. Als u meer informatie nodig hebt over Power BI-service en bestanden uploadt, raadpleegt u de zelfstudie Aan de slag met het maken van Power BI-service.
Notitie
Als de D3 JavaScript-bibliotheek niet is geïnstalleerd als onderdeel van uw installatie, installeert u deze nu. Voer vanuit PowerShell de opdracht uit npm i d3@latest --save
Het maken van een staafdiagramvisual omvat de volgende stappen:
- Een nieuw project maken
-
Het mogelijkhedenbestand definiëren -
capabilities.json - De visual-API maken
- Uw visual verpakken -pbiviz.json
Een nieuw project maken
Het doel van deze zelfstudie is om u te helpen begrijpen hoe een visual is gestructureerd en geschreven. U kunt deze instructies volgen om een volledig nieuwe visual met streepjescode te maken, of u kunt de opslagplaats voor broncode klonen en deze gebruiken om mee te doen zonder uw eigen visual te maken.
Open PowerShell en navigeer naar de map waarin u uw project wilt maken.
Voer de volgende opdracht in:
pbiviz new BarChartU hebt nu een map met de naam BarChart met de bestanden van de visual.
Open in VS Code het bestand [tsconfig.json] (visual-project-structure.md#tsconfigjson) en wijzig de naam van 'bestanden' in 'src/barChart.ts'.
"files": [ "src/barChart.ts" ]Het tsconfig.json object 'bestanden' verwijst naar het bestand waarin de hoofdklasse van de visual zich bevindt.
Het uiteindelijke tsconfig.json-bestand moet er als volgt uitzien.
Het bestand package.json bevat een lijst met projectafhankelijkheden. Vervang uw package.json bestand door dit bestand.
U hebt nu een nieuwe map voor uw visual met de volgende bestanden en mappen:
Zie de projectstructuur van power BI-visuals voor een gedetailleerde uitleg van de functie van elk van deze bestanden.
De twee bestanden waarop we ons in deze zelfstudie richten, zijn het capabilities.json-bestand , dat de visual aan de host beschrijft en het src/barchart.ts-bestand , dat de API van de visual bevat.
Mogelijkheden definiëren
Het capabilities.json-bestand is de plek waar we gegevens aan de host binden. We beschrijven het soort gegevensvelden dat wordt geaccepteerd en welke functies de visual moet hebben.
Gegevensrollen definiëren
Variabelen worden gedefinieerd en gebonden in de dataRoles sectie van het mogelijkhedenbestand. We willen dat ons staafdiagram twee typen variabelen accepteert:
- Categorische gegevens die worden vertegenwoordigd door de verschillende balken in de grafiek
- Numerieke of gemeten gegevens, die worden vertegenwoordigd door de hoogte van elke staaf
Controleer in Visual Studio Code in het capabilities.json bestand of het volgende JSON-fragment wordt weergegeven in het object met het label dataRoles.
"dataRoles": [
{
"displayName": "Category Data",
"name": "category",
"kind": "Grouping"
},
{
"displayName": "Measure Data",
"name": "measure",
"kind": "Measure"
}
],
De gegevens toewijzen
Voeg vervolgens gegevenstoewijzing toe om de host te laten weten wat er met deze variabelen moet worden doen:
Vervang de inhoud van het object dataViewMappings door de volgende code:
"dataViewMappings": [
{
"conditions": [
{
"category": {
"max": 1
},
"measure": {
"max": 1
}
}
],
"categorical": {
"categories": {
"for": {
"in": "category"
}
},
"values": {
"select": [
{
"bind": {
"to": "measure"
}
}
]
}
}
}
],
Met de bovenstaande code worden de voorwaarden gemaakt die elk gegevensrolobject slechts één veld tegelijk kan bevatten. U ziet dat we de interne name gegevensrol gebruiken om naar elk veld te verwijzen.
Ook wordt de categorische gegevenstoewijzing ingesteld, zodat elk veld wordt toegewezen aan de juiste variabele.
Objecten definiëren voor het deelvenster Eigenschappen
In de sectie 'objecten' van het mogelijkhedenbestand definiëren we de aanpasbare functies die moeten worden weergegeven in het opmaakvenster. Deze functies hebben geen invloed op de inhoud van de grafiek, maar ze kunnen het uiterlijk ervan wijzigen.
Zie Objecten voor meer informatie over objecten en hoe ze werken.
De volgende objecten zijn optioneel. Voeg deze toe als u door de optionele secties van deze zelfstudie wilt gaan om kleuren toe te voegen en de X-as weer te geven.
Vervang de inhoud van de sectie 'objecten' door de volgende code:
"objects": {
"enableAxis": {
"properties": {
"show": {
"type": {
"bool": true
}
},
"fill": {
"type": {
"fill": {
"solid": {
"color": true
}
}
}
}
}
},
"colorSelector": {
"properties": {
"fill": {
"type": {
"fill": {
"solid": {
"color": true
}
}
}
}
}
}
},
Sla het bestand capabilities.json op.
Het uiteindelijke bestand met mogelijkheden moet eruitzien zoals in dit voorbeeld.
Visual-API
Alle visuals beginnen met een klasse die de IVisual interface implementeert. Het src/visual.ts-bestand is het standaardbestand dat deze klasse bevat.
In deze zelfstudie noemen we ons IVisual bestand barChart.ts.
Download het bestand en sla het op in de map /src , als u dit nog niet hebt gedaan. In deze sectie doorlopen we dit bestand in detail en beschrijven we de verschillende secties.
Imports
In de eerste sectie van het bestand worden de modules geïmporteerd die nodig zijn voor deze visual. Naast de Power BI-visualmodules importeren we ook de d3-bibliotheek.
De volgende modules worden geïmporteerd in uw barChart.ts-bestand :
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
Vervolgens definiëren we de visuele interfaces. De volgende interface wordt gebruikt om de visual van het staafdiagram te beschrijven:
- BarChartDataPoint
Deze interface wordt als volgt gedefinieerd:
/**
* 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;
}
Visuele transformatie
Nu de gegevensstructuur is gedefinieerd, moeten we er gegevens aan toewijzen met behulp van de createSelectorDataPoints functie. Deze functie ontvangt gegevens uit de gegevensweergave en transformeert deze naar een indeling die de visual kan gebruiken. In dit geval wordt de BarChartDataPoint[] interface geretourneerd die in de vorige sectie is beschreven.
Deze DataView bevat de gegevens die moeten worden gevisualiseerd. Deze gegevens kunnen zich in verschillende vormen bevinden, zoals categorisch of tabellair. Als u een categorische visual wilt maken zoals een staafdiagram, gebruikt u de categorische eigenschap op de DataView.
Deze functie wordt aangeroepen wanneer de visual wordt bijgewerkt.
/**
* 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;
}
Notitie
De volgende functies in het bestand barChart.ts hebben betrekking op kleur en het maken van de X-as. Deze zijn optioneel en worden verderop in deze zelfstudie besproken. Deze zelfstudie gaat verder vanuit de IVisual functie.
De visual weergeven
Zodra de gegevens zijn gedefinieerd, geven we de visual weer met behulp van de BarChart-klasse waarmee deIVisual interface wordt geïmplementeerd. De IVisual interface wordt beschreven op de visual-API-pagina . Het bevat een constructor methode waarmee de visual wordt gemaakt en een update methode die wordt aangeroepen telkens wanneer de visual opnieuw wordt geladen.
Voordat u de visual weergeeft, moeten we de leden van de klasse declareren:
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,
};
}
De visual samenstellen
De constructorfunctie wordt slechts eenmaal aangeroepen wanneer de visual voor het eerst wordt weergegeven. Er worden lege SVG-containers gemaakt voor het staafdiagram en de X-as. U ziet dat de D3-bibliotheek wordt gebruikt om de SVG weer te geven.
/**
* 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);
}
De visual bijwerken
De updatemethode wordt elke keer aangeroepen wanneer de grootte van de visual of een van de waarden wordt gewijzigd.
Schalen
We moeten de visual schalen zodat het aantal balken en huidige waarden in de gedefinieerde breedte- en hoogtelimieten van de visual past. Dit is vergelijkbaar met de updatemethode in de zelfstudie circlecard.
Voor het berekenen van de schaal gebruiken we de scaleLinear en scaleBand methoden die eerder uit de d3-scale bibliotheek zijn geïmporteerd.
De options.dataViews[0].categorical.values[0].maxLocal waarde bevat de grootste waarde van alle huidige gegevenspunten. Deze waarde wordt gebruikt om de hoogte van de y-as te bepalen. De schaal voor de breedte van de x-as wordt bepaald door het aantal categorieën dat is gebonden aan de visual in de barchartdatapoint interface.
Voor gevallen waarin de X-as wordt weergegeven, verwerkt deze visual ook woordeinden voor het geval er onvoldoende ruimte is om de volledige naam op de X-as uit te schrijven.
Andere updatefuncties
Naast schalen verwerkt de updatemethode ook selecties en kleuren. Deze functies zijn optioneel en worden later besproken:
/**
* 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);
});
}
Het deelvenster Eigenschappen vullen met behulp van de opmaakmodelutils
De laatste methode in de IVisual functie is getFormattingModel. Met deze methode wordt een modelobject voor het opmaakmodel voor een modern opmaakvenster gemaakt en geretourneerd met alle onderdelen en eigenschappen van het opmaakvenster. Vervolgens wordt het object in het deelvenster Opmaak geplaatst. In ons geval maken we opmaakkaarten voor enableAxis en colorSelector, inclusief opmaakeigenschappen voor show en fill, volgens de 'objecten' in het capabilities.json bestand. Als u een kleurkiezer wilt toevoegen voor elke categorie in het eigenschappenvenster, voegt u een for-lus barDataPoints toe en voegt u voor elke categorie een nieuwe eigenschap voor kleurkiezernotatie toe aan het opmaakmodel.
Als u een opmaakmodel wilt maken, moet de ontwikkelaar bekend zijn met alle bijbehorende onderdelen. Bekijk de onderdelen van het opmaakvenster in Format Pane.
getFormattingModel Bekijk de API van de FormattingModel utils opslagplaats voor de opmaakmodelhulpmiddelen.
Download het bestand en sla het op in de map /src . Opmaakeigenschappen en de bijbehorende waarden declareren in een indelingsinstellingenklasse:
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(),
}));
});
}
}
}
Bouw en maak het servicemodel voor opmaakinstellingen in de constructormethode van de visual. De service opmaakinstellingen ontvangt de instellingen voor de barChart-indeling en converteert deze naar een FormatModel-object dat wordt geretourneerd in de getFormattingModel API.
Als u de lokalisatiefunctie wilt gebruiken, voegt u het lokalisatiebeheer toe aan de service voor opmaakinstellingen.
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
}
Werk het model voor opmaakinstellingen bij met behulp van de update-API. Roep de Update-API aan telkens wanneer een opmaakeigenschap in het eigenschappenvenster wordt gewijzigd. Gegevenspunten voor staafdiagrammen maken en deze invullen in het opmaakinstellingenmodel:
// 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
}
Ten slotte is de nieuwe API getFormattingModel een eenvoudige coderegel met behulp van de opmaakinstellingenservice en het huidige model voor opmaakinstellingen dat is gemaakt in de bovenstaande update-API .
public getFormattingModel(): powerbi.visuals.FormattingModel {
return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
}
(Optioneel) De X-as (statische objecten) weergeven
U kunt objecten toevoegen aan het deelvenster Eigenschap om de visual verder aan te passen. Deze aanpassingen kunnen wijzigingen in de gebruikersinterface zijn of wijzigingen met betrekking tot de gegevens waarop een query is uitgevoerd.
U kunt deze objecten in- of uitschakelen in het deelvenster Eigenschappen .
In dit voorbeeld wordt een X-as in het staafdiagram weergegeven als een statisch object.
We hebben de enableAxis eigenschap al toegevoegd aan het mogelijkhedenbestand en de barChartSettings-interface.
(Optioneel) Kleur toevoegen (gegevensgebonden objecten)
Gegevensgebonden objecten zijn vergelijkbaar met statische objecten, maar hebben meestal te maken met gegevensselectie. U kunt bijvoorbeeld gegevensgebonden objecten gebruiken om interactief de kleur te selecteren die aan elk gegevenspunt is gekoppeld.
We hebben het colorSelector object al gedefinieerd in het mogelijkhedenbestand .
Elk gegevenspunt wordt vertegenwoordigd door een andere kleur. We nemen kleur op in de BarChartDataPoint-interface en wijzen een standaardkleur toe aan elk gegevenspunt wanneer deze is gedefinieerd in 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;
}
De colorPalette service beheert deze kleuren in de createSelectorDataPoints functie. Omdat createSelectorDataPoints elk van de gegevenspunten wordt herhaald, is het een ideale plek om categorische objecten, zoals kleur, toe te wijzen.
Voor gedetailleerdere instructies over het toevoegen van kleur aan uw staafdiagram gaat u naar Kleuren toevoegen aan uw Power BI-visual.
Notitie
Controleer of het uiteindelijke barChart.ts-bestand er als volgt uitziet barChart.ts broncode, of download de barChart.ts broncode en gebruik dit om het bestand te vervangen.
De visual testen
Voer de visual uit op de Power BI-server om te zien hoe deze eruitziet:
Navigeer in PowerShell naar de map van het project en start de ontwikkel-app.
pbiviz startUw visual wordt nu uitgevoerd terwijl deze wordt gehost op uw computer.
Belangrijk
Sluit het PowerShell-venster niet tot het einde van de zelfstudie. Als u wilt voorkomen dat de visual wordt uitgevoerd, voert u Ctrl+ in en als u wordt gevraagd om de batchtaak te beëindigen, voert u Y in en voert u Enter in.
Bekijk de visual in Power BI-service door de visual Ontwikkelaars te selecteren in het deelvenster Visualisatie.
Gegevens toevoegen aan de visual
Sleep de randen van de visual om de grootte te wijzigen en u ziet hoe de schaal wordt aangepast.
Schakel de X-as in of uit.
De kleuren van de verschillende categorieën wijzigen.
Andere functies toevoegen
U kunt uw visual verder aanpassen door meer functies toe te voegen. U kunt functies toevoegen die de functionaliteit van de visual vergroten, het uiterlijk ervan verbeteren of de gebruiker meer controle geven over het uiterlijk ervan. U kunt bijvoorbeeld:
- Selectie en interacties met andere visuals toevoegen
- Een schuifregelaar voor het eigenschappenvenster toevoegen waarmee ondoorzichtigheid wordt bestuurd
- Ondersteuning voor knopinfo toevoegen
- Een landingspagina toevoegen
- Lokale taalondersteuning toevoegen
De visual verpakken
Voordat u uw visual in Power BI Desktop kunt laden of met de community kunt delen in de Power BI Visual Gallery, moet u deze inpakken.
Volg de instructies in Een Power BI-visual verpakken om de visual voor te bereiden voor delen.
Notitie
Zie de voorbeeldgrafiek van Power BI-visuals voor de volledige broncode van een staafdiagram met meer functies, waaronder knopinfo en een contextmenu.