Formattazione delle utilità

Articolo
12/06/2023

Le utilità di formattazione contengono classi, interfacce e metodi per formattare i valori. Contiene anche metodi extender per elaborare stringhe e misurare le dimensioni del testo in un documento SVG/HTML.

Servizio di misurazione del testo

Il modulo fornisce le funzioni e le interfacce seguenti:

Interfaccia TextProperties

Questa interfaccia descrive le proprietà comuni del testo.

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

measureSvgTextWidth

Questa funzione misura la larghezza del testo con proprietà di testo SVG specifiche.

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

Esempio di utilizzo measureSvgTextWidthdi :

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

Questa funzione restituisce una correzione con le proprietà di testo SVG indicate.

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

Esempio di utilizzo measureSvgTextRectdi :

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

Questa funzione misura l'altezza del testo con proprietà di testo SVG specifiche.

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

Esempio di utilizzo measureSvgTextHeightdi :

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

Questa funzione restituisce una linea di base di proprietà di testo SVG specifiche.

function estimateSvgTextBaselineDelta(textProperties: TextProperties): number;

Esempio:

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

Questa funzione stima l'altezza del testo con proprietà di testo SVG specifiche.

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

Esempio di utilizzo estimateSvgTextHeightdi :

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

Per un esempio, vedere codice visivo personalizzato.

measureSvgTextElementWidth

Questa funzione misura la larghezza di svgElement.

function measureSvgTextElementWidth(svgElement: SVGTextElement): number;

Esempio di utilizzo di 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

Questa funzione recupera le proprietà di misurazione del testo dell'elemento DOM specificato.

function getMeasurementProperties(element: Element): TextProperties;

Esempio di utilizzo getMeasurementPropertiesdi :

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

Questa funzione recupera le proprietà di misurazione del testo dell'elemento di testo SVG specificato.

function getSvgMeasurementProperties(svgElement: SVGTextElement): TextProperties;

Esempio di utilizzo getSvgMeasurementPropertiesdi :

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

Questa funzione restituisce la larghezza di un elemento div.

function getDivElementWidth(element: JQuery): string;

Esempio di utilizzo getDivElementWidthdi :

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

Confronta le dimensioni del testo di un'etichetta con le dimensioni disponibili ed esegue il rendering dei puntini di sospensione quando le dimensioni disponibili sono inferiori.

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

Esempio di utilizzo getTailoredTextOrDefaultdi :

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

Estensioni di stringa

Il modulo fornisce le funzioni seguenti:

endsWith

Questa funzione controlla se una stringa termina con una sottostringa.

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

Esempio di utilizzo endsWithdi :

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

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

// returns: true

equalIgnoreCase

Questa funzione confronta le stringhe, ignorando la distinzione tra maiuscole e minuscole.

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

Esempio di utilizzo equalIgnoreCasedi :

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

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

// returns: true

startsWith

Questa funzione controlla se una stringa inizia con una sottostringa.

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

Esempio di utilizzo startsWithdi :

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

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

// returns: true

contains

Questa funzione controlla se una stringa contiene una sottostringa specificata.

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

Esempio di utilizzo contains del metodo :

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

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

// returns: true

isNullOrEmpty

Controlla se una stringa è null o non definita o vuota.

function isNullOrEmpty(value: string): boolean;

Esempio di isNullOrEmpty metodo:

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

stringExtensions.isNullOrEmpty(null);

// returns: true

Formattatore di valori

Il modulo fornisce le funzioni, le interfacce e le classi seguenti:

IValueFormatter

Questa interfaccia descrive i metodi pubblici e le proprietà del formattatore.

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

IValueFormatter.format

Questo metodo formatta il valore specificato.

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

Esempi per IValueFormatter.format:

I formati delle migliaia

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

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

iValueFormatter.format(5678);

// returns: "5.68K"

Milioni di formati

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

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

iValueFormatter.format(1234567890);

// returns: "1234.57M"

I miliardi di formati

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

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

iValueFormatter.format(1234567891236);

// returns: 1234.57bn

Il formato trilioni

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

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

iValueFormatter.format(1234567891236);

// returns: 1.23T

Formato esponente

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

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

iValueFormatter.format(1234567891236);

// returns: 1.234568E+012

Selettore delle impostazioni cultura

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: 03/03/2007 17:42:42

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

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

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

Formato percentuale

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 %

Formato date

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

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

iValueFormatter.format(date);

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

Formato booleano

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

let iValueFormatter = valueFormatter.create({});

iValueFormatter.format(true);

// returns: True

Precisione personalizzata

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

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

iValueFormatter.format(3.141592653589793);

// returns: 3.142

Per un esempio, vedere codice visivo personalizzato.

ValueFormatterOptions

Questa interfaccia descrive IValueFormatter options e le opzioni della create funzione.

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

create

Questo metodo crea un'istanza di IValueFormatter.

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

function create(options: ValueFormatterOptions): IValueFormatter;

Esempio di utilizzo di create

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

valueFormatter.create({});

// returns: an instance of IValueFormatter.

format

In alternativa, è possibile formattare il valore senza creare IValueFormatter. Utile per i casi con stringhe di formati dinamici

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

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

Esempio di utilizzo del formato

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

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

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

Aggiungere la lingua locale all'oggetto visivo di Power BI

Formattazione delle utilità

Servizio di misurazione del testo

Interfaccia TextProperties

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Estensioni di stringa

endsWith

equalIgnoreCase

startsWith

contains

isNullOrEmpty

Formattatore di valori

IValueFormatter

IValueFormatter.format

I formati delle migliaia

Milioni di formati

I miliardi di formati

Il formato trilioni

Formato esponente

Selettore delle impostazioni cultura

Formato percentuale

Formato date

Formato booleano

Precisione personalizzata

ValueFormatterOptions

create

Esempio di utilizzo di create

format

Esempio di utilizzo del formato

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive

Formattazione delle utilità

Servizio di misurazione del testo

Interfaccia TextProperties

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Estensioni di stringa

endsWith

equalIgnoreCase

startsWith

contains

isNullOrEmpty

Formattatore di valori

IValueFormatter

IValueFormatter.format

I formati delle migliaia

Milioni di formati

I miliardi di formati

Il formato trilioni

Formato esponente

Selettore delle impostazioni cultura

Formato percentuale

Formato date

Formato booleano

Precisione personalizzata

ValueFormatterOptions

create

Esempio di utilizzo di create

format

Esempio di utilizzo del formato

Contenuto correlato

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive