Hulpmiddelen voor opmaak

Artikel
10/10/2024

Opmaakhulpmiddelen bevatten klassen, interfaces en methoden voor het opmaken van waarden. Het bevat ook extendermethoden voor het verwerken van tekenreeksen en het meten van de tekengrootte in een SVG/HTML-document.

Tekstmetingsservice

De module biedt de volgende functies en interfaces:

TextProperties-interface

In deze interface worden algemene eigenschappen van de tekst beschreven.

interface TextProperties {
    text?: string;
    fontFamily: string;
    fontSize: string;
    fontWeight?: string;
    fontStyle?: string;
    fontVariant?: string;
    whiteSpace?: string;
}

measureSvgTextWidth

Deze functie meet de breedte van de tekst met specifieke SVG-teksteigenschappen.

function measureSvgTextWidth(textProperties: TextProperties, text?: string): number;

Voorbeeld van het gebruik measureSvgTextWidthvan:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...

let textProperties: TextProperties = {
    text: "Microsoft PowerBI",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.measureSvgTextWidth(textProperties);

// returns: 194.71875

measureSvgTextRect

Deze functie retourneert een rect met de opgegeven SVG-teksteigenschappen.

function measureSvgTextRect(textProperties: TextProperties, text?: string): SVGRect;

Voorbeeld van het gebruik measureSvgTextRectvan:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...

let textProperties: TextProperties = {
    text: "Microsoft PowerBI",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.measureSvgTextRect(textProperties);

// returns: { x: 0, y: -22, width: 194.71875, height: 27 }

measureSvgTextHeight

Deze functie meet de hoogte van de tekst met specifieke SVG-teksteigenschappen.

function measureSvgTextHeight(textProperties: TextProperties, text?: string): number;

Voorbeeld van het gebruik measureSvgTextHeightvan:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...


let textProperties: TextProperties = {
    text: "Microsoft PowerBI",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.measureSvgTextHeight(textProperties);

// returns: 27

estimateSvgTextBaselineDelta

Deze functie retourneert een basislijn van specifieke SVG-teksteigenschappen.

function estimateSvgTextBaselineDelta(textProperties: TextProperties): number;

Voorbeeld:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...

let textProperties: TextProperties = {
    text: "Microsoft PowerBI",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.estimateSvgTextBaselineDelta(textProperties);

// returns: 5

estimateSvgTextHeight

Met deze functie wordt de hoogte van de tekst met specifieke SVG-teksteigenschappen geschat.

function estimateSvgTextHeight(textProperties: TextProperties, tightFightForNumeric?: boolean): number;

Voorbeeld van het gebruik estimateSvgTextHeightvan:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...

let textProperties: TextProperties = {
    text: "Microsoft PowerBI",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.estimateSvgTextHeight(textProperties);

// returns: 27

Zie aangepaste visualcode voor een voorbeeld.

measureSvgTextElementWidth

Met deze functie wordt de breedte van het svgElement gemeten.

function measureSvgTextElementWidth(svgElement: SVGTextElement): number;

Voorbeeld van het gebruik van measureSvgTextElementWidth:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
// ...

let svg: D3.Selection = d3.select("body").append("svg");

svg.append("text")
    .text("Microsoft PowerBI")
    .attr({
        "x": 25,
        "y": 25
    })
    .style({
        "font-family": "sans-serif",
        "font-size": "24px"
    });

let textElement: D3.Selection = svg.select("text");

textMeasurementService.measureSvgTextElementWidth(textElement.node());

// returns: 194.71875

getMeasurementProperties

Met deze functie worden de tekstmetingseigenschappen van het opgegeven DOM-element opgehaald.

function getMeasurementProperties(element: Element): TextProperties;

Voorbeeld van het gebruik getMeasurementPropertiesvan:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
// ...

let element: JQuery = $(document.createElement("div"));

element.text("Microsoft PowerBI");

element.css({
    "width": 500,
    "height": 500,
    "font-family": "sans-serif",
    "font-size": "32em",
    "font-weight": "bold",
    "font-style": "italic",
    "white-space": "nowrap"
});

textMeasurementService.getMeasurementProperties(element.get(0));

/* returns: {
    fontFamily:"sans-serif",
    fontSize: "32em",
    fontStyle: "italic",
    fontVariant: "",
    fontWeight: "bold",
    text: "Microsoft PowerBI",
    whiteSpace: "nowrap"
}*/

getSvgMeasurementProperties

Met deze functie worden de eigenschappen van de tekstmeting van het opgegeven SVG-tekstelement opgehaald.

function getSvgMeasurementProperties(svgElement: SVGTextElement): TextProperties;

Voorbeeld van het gebruik getSvgMeasurementPropertiesvan:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
// ...

let svg: D3.Selection = d3.select("body").append("svg");

let textElement: D3.Selection = svg.append("text")
    .text("Microsoft PowerBI")
    .attr({
        "x": 25,
        "y": 25
    })
    .style({
        "font-family": "sans-serif",
        "font-size": "24px"
    });

textMeasurementService.getSvgMeasurementProperties(textElement.node());

/* returns: {
    "text": "Microsoft PowerBI",
    "fontFamily": "sans-serif",
    "fontSize": "24px",
    "fontWeight": "normal",
    "fontStyle": "normal",
    "fontVariant": "normal",
    "whiteSpace": "nowrap"
}*/

getDivElementWidth

Deze functie retourneert de breedte van een div-element.

function getDivElementWidth(element: JQuery): string;

Voorbeeld van het gebruik getDivElementWidthvan:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
// ...

let svg: Element = d3.select("body")
    .append("div")
    .style({
        "width": "150px",
        "height": "150px"
    })
    .node();

textMeasurementService.getDivElementWidth(svg)

// returns: 150px

getTailoredTextOrDefault

Vergelijkt de tekstgrootte van een label met de beschikbare grootte en geeft weglatingstekens weer wanneer de beschikbare grootte kleiner is.

function getTailoredTextOrDefault(textProperties: TextProperties, maxWidth: number): string;

Voorbeeld van het gebruik getTailoredTextOrDefaultvan:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...

let textProperties: TextProperties = {
    text: "Microsoft PowerBI!",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.getTailoredTextOrDefault(textProperties, 100);

// returns: Micros...

Tekenreeksextensies

De module biedt de volgende functies:

endsWith

Met deze functie wordt gecontroleerd of een tekenreeks eindigt op een subtekenreeks.

function endsWith(str: string, suffix: string): boolean;

Voorbeeld van het gebruik endsWithvan:

import { stringExtensions } from "powerbi-visuals-utils-formattingutils";
// ...

stringExtensions.endsWith("Power BI", "BI");

// returns: true

equalIgnoreCase

Met deze functie worden tekenreeksen vergeleken, waarbij hoofdletters worden genegeerd.

function equalIgnoreCase(a: string, b: string): boolean;

Voorbeeld van het gebruik equalIgnoreCasevan:

import { stringExtensions } from "powerbi-visuals-utils-formattingutils";
// ...

stringExtensions.equalIgnoreCase("Power BI", "power bi");

// returns: true

startsWith

Met deze functie wordt gecontroleerd of een tekenreeks begint met een subtekenreeks.

function startsWith(a: string, b: string): boolean;

Voorbeeld van het gebruik startsWithvan:

import { stringExtensions } from "powerbi-visuals-utils-formattingutils";
// ...

stringExtensions.startsWith("Power BI", "Power");

// returns: true

bevat

Met deze functie wordt gecontroleerd of een tekenreeks een opgegeven subtekenreeks bevat.

function contains(source: string, substring: string): boolean;

Voorbeeld van het gebruik contains van de methode:

import { stringExtensions } from "powerbi-visuals-utils-formattingutils";
// ...

stringExtensions.contains("Microsoft Power BI Visuals", "Power BI");

// returns: true

isNullOrEmpty

Hiermee wordt gecontroleerd of een tekenreeks null of niet gedefinieerd of leeg is.

function isNullOrEmpty(value: string): boolean;

Voorbeeld van isNullOrEmpty methode:

import { stringExtensions } from "powerbi-visuals-utils-formattingutils";
// ...

stringExtensions.isNullOrEmpty(null);

// returns: true

Waardeopmaak

De module biedt de volgende functies, interfaces en klassen:

IValueFormatter

In deze interface worden openbare methoden en eigenschappen van de formatter beschreven.

interface IValueFormatter {
    format(value: any): string;
    displayUnit?: DisplayUnit;
    options?: ValueFormatterOptions;
}

IValueFormatter.format

Met deze methode wordt de opgegeven waarde opgemaakt.

function format(value: any, format?: string, allowFormatBeautification?: boolean): string;

Voorbeelden voor IValueFormatter.format:

De duizend notaties

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ value: 1001 });

iValueFormatter.format(5678);

// returns: "5.68K"

De miljoen notaties

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ value: 1e6 });

iValueFormatter.format(1234567890);

// returns: "1234.57M"

De miljard notaties

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ value: 1e9 });

iValueFormatter.format(1234567891236);

// returns: 1234.57bn

De biljoen-indeling

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ value: 1e12 });

iValueFormatter.format(1234567891236);

// returns: 1.23T

De exponent-indeling

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ format: "E" });

iValueFormatter.format(1234567891236);

// returns: 1.234568E+012

De cultuurkiezer

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let valueFormatterUK = valueFormatter.create({ cultureSelector: "en-GB" });

valueFormatterUK.format(new Date(2007, 2, 3, 17, 42, 42));

// returns: 02/03/2007 17:42:42

let valueFormatterUSA = valueFormatter.create({ cultureSelector: "en-US" });

valueFormatterUSA.format(new Date(2007, 2, 3, 17, 42, 42));

// returns: 2/3/2007 5:42:42 PM

De percentagenotatie

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ format: "0.00 %;-0.00 %;0.00 %" });

iValueFormatter.format(0.54);

// returns: 54.00 %

De datumnotatie

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let date = new Date(2016, 10, 28, 15, 36, 0),
    iValueFormatter = valueFormatter.create({});

iValueFormatter.format(date);

// returns: 10/28/2016 3:36:00 PM

De Booleaanse indeling

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({});

iValueFormatter.format(true);

// returns: True

De aangepaste precisie

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ value: 0, precision: 3 });

iValueFormatter.format(3.141592653589793);

// returns: 3.142

Zie aangepaste visualcode voor een voorbeeld.

ValueFormatterOptions

Deze interface beschrijft options de IValueFormatter en de opties van create de functie.

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";
import ValueFormatterOptions = valueFormatter.ValueFormatterOptions;

interface ValueFormatterOptions {
    /** The format string to use. */
    format?: string;
    /** The data value. */
    value?: any;
    /** The data value. */
    value2?: any;
    /** The number of ticks. */
    tickCount?: any;
    /** The display unit system to use */
    displayUnitSystemType?: DisplayUnitSystemType;
    /** True if we are formatting single values in isolation (e.g. card), as opposed to multiple values with a common base (e.g. chart axes) */
    formatSingleValues?: boolean;
    /** True if we want to trim off unnecessary zeroes after the decimal and remove a space before the % symbol */
    allowFormatBeautification?: boolean;
    /** Specifies the maximum number of decimal places to show*/
    precision?: number;
    /** Detect axis precision based on value */
    detectAxisPrecision?: boolean;
    /** Specifies the column type of the data value */
    columnType?: ValueTypeDescriptor;
    /** Specifies the culture */
    cultureSelector?: string;
}

maken

Met deze methode maakt u een exemplaar van IValueFormatter.

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";
import create = valueFormatter.create;

function create(options: ValueFormatterOptions): IValueFormatter;

Voorbeeld van het gebruik van maken

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

valueFormatter.create({});

// returns: an instance of IValueFormatter.

indeling

Alternatieve manier om de waarde op te maken zonder te maken IValueFormatter. Handig voor cases met tekenreeksen met dynamische indelingen

import { format } from "powerbi-visuals-utils-formattingutils";
import format = valueFormatter.format;

function format(value: any, format?: string, allowFormatBeautification?: boolean, cultureSelector?: string): string;

Voorbeeld van het gebruik van opmaak

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

const value = 12
const format = '¥ #,0'
valueFormatter.format(value, format);

// returns: formatted value as string (¥ 12)

De lokale taal toevoegen aan uw Power BI-visual

Delen via

Hulpmiddelen voor opmaak

Tekstmetingsservice

TextProperties-interface

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Tekenreeksextensies

endsWith

equalIgnoreCase

startsWith

bevat

isNullOrEmpty

Waardeopmaak

IValueFormatter

IValueFormatter.format

De duizend notaties

De miljoen notaties

De miljard notaties

De biljoen-indeling

De exponent-indeling

De cultuurkiezer

De percentagenotatie

De datumnotatie

De Booleaanse indeling

De aangepaste precisie

ValueFormatterOptions

maken

Voorbeeld van het gebruik van maken

indeling

Voorbeeld van het gebruik van opmaak

Feedback

Aanvullende resources

Delen via

Hulpmiddelen voor opmaak

Tekstmetingsservice

TextProperties-interface

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Tekenreeksextensies

endsWith

equalIgnoreCase

startsWith

bevat

isNullOrEmpty

Waardeopmaak

IValueFormatter

IValueFormatter.format

De duizend notaties

De miljoen notaties

De miljard notaties

De biljoen-indeling

De exponent-indeling

De cultuurkiezer

De percentagenotatie

De datumnotatie

De Booleaanse indeling

De aangepaste precisie

ValueFormatterOptions

maken

Voorbeeld van het gebruik van maken

indeling

Voorbeeld van het gebruik van opmaak

Gerelateerde inhoud

Feedback

Aanvullende resources