Nástroje pro formátování

Článek
10/10/2024

Nástroje formátování obsahují třídy, rozhraní a metody pro formátování hodnot. Obsahuje také rozšiřující metody pro zpracování řetězců a měření velikosti textu v dokumentu SVG/HTML.

Služba měření textu

Modul poskytuje následující funkce a rozhraní:

Rozhraní TextProperties

Toto rozhraní popisuje běžné vlastnosti textu.

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

measureSvgTextWidth

Tato funkce měří šířku textu s konkrétními vlastnostmi textu SVG.

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

Příklad použití measureSvgTextWidth:

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

Tato funkce vrátí rect s danými vlastnostmi textu SVG.

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

Příklad použití measureSvgTextRect:

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

Tato funkce měří výšku textu s konkrétními vlastnostmi textu SVG.

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

Příklad použití measureSvgTextHeight:

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

Tato funkce vrátí směrný plán konkrétních vlastností textu SVG.

function estimateSvgTextBaselineDelta(textProperties: TextProperties): number;

Příklad:

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

Tato funkce odhaduje výšku textu s konkrétními vlastnostmi textu SVG.

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

Příklad použití estimateSvgTextHeight:

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

Příklad najdete v kódu vlastního vizuálu.

measureSvgTextElementWidth

Tato funkce měří šířku svgElement.

function measureSvgTextElementWidth(svgElement: SVGTextElement): number;

Příklad použití 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

Tato funkce načte vlastnosti měření textu daného prvku DOM.

function getMeasurementProperties(element: Element): TextProperties;

Příklad použití getMeasurementProperties:

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

Tato funkce načte vlastnosti měření textu daného textového prvku SVG.

function getSvgMeasurementProperties(svgElement: SVGTextElement): TextProperties;

Příklad použití getSvgMeasurementProperties:

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

Tato funkce vrátí šířku prvku div.

function getDivElementWidth(element: JQuery): string;

Příklad použití getDivElementWidth:

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

Porovná velikost textu popisku s dostupnou velikostí a vykreslí tři tečky, pokud je dostupná velikost menší.

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

Příklad použití getTailoredTextOrDefault:

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

Rozšíření řetězců

Modul poskytuje následující funkce:

endsWith

Tato funkce zkontroluje, jestli řetězec končí podřetězcem.

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

Příklad použití endsWith:

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

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

// returns: true

equalIgnoreCase

Tato funkce porovnává řetězce a ignoruje malá a velká písmena.

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

Příklad použití equalIgnoreCase:

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

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

// returns: true

startsWith

Tato funkce zkontroluje, jestli řetězec začíná podřetězcem.

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

Příklad použití startsWith:

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

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

// returns: true

obsahuje

Tato funkce zkontroluje, jestli řetězec obsahuje zadaný podřetězec.

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

Příklad použití contains metody:

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

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

// returns: true

isNullOrEmpty

Zkontroluje, jestli je řetězec null nebo nedefinovaný nebo prázdný.

function isNullOrEmpty(value: string): boolean;

isNullOrEmpty Příklad metody:

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

stringExtensions.isNullOrEmpty(null);

// returns: true

Formátovač hodnot

Modul poskytuje následující funkce, rozhraní a třídy:

IValueFormatter

Toto rozhraní popisuje veřejné metody a vlastnosti formátovače.

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

IValueFormatter.format

Tato metoda formátuje zadanou hodnotu.

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

Příklady pro IValueFormatter.format:

Formáty tisíců

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

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

iValueFormatter.format(5678);

// returns: "5.68K"

Milion formátů

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

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

iValueFormatter.format(1234567890);

// returns: "1234.57M"

Formáty miliard

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

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

iValueFormatter.format(1234567891236);

// returns: 1234.57bn

Formát biliónu

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

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

iValueFormatter.format(1234567891236);

// returns: 1.23T

Formát exponentu

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

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

iValueFormatter.format(1234567891236);

// returns: 1.234568E+012

Selektor jazykové verze

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

Formát procenta

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 %

Formát kalendářních dat

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

Logický formát

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

let iValueFormatter = valueFormatter.create({});

iValueFormatter.format(true);

// returns: True

Přizpůsobená přesnost

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

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

iValueFormatter.format(3.141592653589793);

// returns: 3.142

Příklad najdete v kódu vlastního vizuálu.

ValueFormatterOptions

Toto rozhraní popisuje options IValueFormatter a možnosti create funkce.

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

vytvoření

Tato metoda vytvoří instanci IValueFormatter.

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

function create(options: ValueFormatterOptions): IValueFormatter;

Příklad použití příkazu create

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

valueFormatter.create({});

// returns: an instance of IValueFormatter.

format

Alternativní způsob formátování hodnoty bez vytvoření IValueFormatter. Užitečné pro případy s řetězcem dynamických formátů

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

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

Příklad použití formátu

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

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

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

Přidání místního jazyka do vizuálu Power BI

Sdílet prostřednictvím

Nástroje pro formátování

Služba měření textu

Rozhraní TextProperties

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Rozšíření řetězců

endsWith

equalIgnoreCase

startsWith

obsahuje

isNullOrEmpty

Formátovač hodnot

IValueFormatter

IValueFormatter.format

Formáty tisíců

Milion formátů

Formáty miliard

Formát biliónu

Formát exponentu

Selektor jazykové verze

Formát procenta

Formát kalendářních dat

Logický formát

Přizpůsobená přesnost

ValueFormatterOptions

vytvoření

Příklad použití příkazu create

format

Příklad použití formátu

Váš názor

Další materiály

Sdílet prostřednictvím

Nástroje pro formátování

Služba měření textu

Rozhraní TextProperties

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Rozšíření řetězců

endsWith

equalIgnoreCase

startsWith

obsahuje

isNullOrEmpty

Formátovač hodnot

IValueFormatter

IValueFormatter.format

Formáty tisíců

Milion formátů

Formáty miliard

Formát biliónu

Formát exponentu

Selektor jazykové verze

Formát procenta

Formát kalendářních dat

Logický formát

Přizpůsobená přesnost

ValueFormatterOptions

vytvoření

Příklad použití příkazu create

format

Příklad použití formátu

Související obsah

Váš názor

Další materiály