Βοηθητικά προγράμματα μορφοποίησης

Άρθρο
10/10/2024

Τα βοηθητικά προγράμματα μορφοποίησης περιέχουν, διασυνδέσεις και μεθόδους για τη μορφοποίηση τιμών. Περιέχει επίσης μεθόδους επέκτασης για την επεξεργασία συμβολοσειρών και τη μέτρηση μεγέθους κειμένου σε ένα έγγραφο SVG/HTML.

Υπηρεσία μέτρησης κειμένου

Η λειτουργική μονάδα παρέχει τις παρακάτω συναρτήσεις και διασυνδέσεις:

Διασύνδεση TextProperties

Αυτή η διασύνδεση περιγράφει κοινές ιδιότητες του κειμένου.

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

measureSvgTextWidth

Αυτή η συνάρτηση μετρά το πλάτος του κειμένου με συγκεκριμένες ιδιότητες κειμένου SVG.

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

Παράδειγμα χρήσης 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

Αυτή η συνάρτηση επιστρέφει ένα ορθογώνιο με τις δεδομένες ιδιότητες κειμένου SVG.

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

Παράδειγμα χρήσης 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

Αυτή η συνάρτηση μετρά το ύψος του κειμένου με συγκεκριμένες ιδιότητες κειμένου SVG.

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

Παράδειγμα χρήσης 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

Αυτή η συνάρτηση επιστρέφει μια γραμμή βάσης συγκεκριμένων ιδιοτήτων κειμένου SVG.

function estimateSvgTextBaselineDelta(textProperties: TextProperties): number;

Παράδειγμα:

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

Αυτή η συνάρτηση εκτιμά το ύψος του κειμένου με συγκεκριμένες ιδιότητες κειμένου SVG.

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

Παράδειγμα χρήσης 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

Για παράδειγμα, ανατρέξτε στον κώδικα προσαρμοσμένης απεικόνισης.

measureSvgTextElementWidth

Αυτή η συνάρτηση μετρά το πλάτος του svgElement.

function measureSvgTextElementWidth(svgElement: SVGTextElement): number;

Παράδειγμα χρήσης του 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

Αυτή η συνάρτηση λαμβάνει τις ιδιότητες μέτρησης κειμένου του δεδομένου στοιχείου DOM.

function getMeasurementProperties(element: Element): TextProperties;

Παράδειγμα χρήσης 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

Αυτή η συνάρτηση λαμβάνει τις ιδιότητες μέτρησης κειμένου του δεδομένου στοιχείου κειμένου SVG.

function getSvgMeasurementProperties(svgElement: SVGTextElement): TextProperties;

Παράδειγμα χρήσης 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

Αυτή η συνάρτηση επιστρέφει το πλάτος ενός στοιχείου div.

function getDivElementWidth(element: JQuery): string;

Παράδειγμα χρήσης 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

Συγκρίνει το μέγεθος κειμένου μιας ετικέτας με το διαθέσιμο μέγεθος και αποδίδει αποσιωπητικά όταν το διαθέσιμο μέγεθος είναι μικρότερο.

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

Παράδειγμα χρήσης 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...

Επεκτάσεις συμβολοσειρών

Η λειτουργική μονάδα παρέχει τις ακόλουθες συναρτήσεις:

λήγειμε

Αυτή η συνάρτηση ελέγχει εάν μια συμβολοσειρά τελειώνει με μια δευτερεύουσα συμβολοσειρά.

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

Παράδειγμα χρήσης endsWithτου :

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

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

// returns: true

equalIgnoreCase

Αυτή η συνάρτηση συγκρίνει συμβολοσειρές, αγνοώντας τα πεζά-κεφαλαία.

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

Παράδειγμα χρήσης equalIgnoreCaseτου :

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

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

// returns: true

startsWith

Αυτή η συνάρτηση ελέγχει εάν μια συμβολοσειρά ξεκινά με μια δευτερεύουσα συμβολοσειρά.

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

Παράδειγμα χρήσης startsWithτου :

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

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

// returns: true

περιέχει

Αυτή η συνάρτηση ελέγχει εάν μια συμβολοσειρά περιέχει μια καθορισμένη δευτερεύουσα συμβολοσειρά.

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

Παράδειγμα χρήσης contains της μεθόδου :

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

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

// returns: true

isNullOrEmpty

Ελέγχει εάν μια συμβολοσειρά είναι null ή δεν έχει οριστεί ή είναι κενή.

function isNullOrEmpty(value: string): boolean;

Παράδειγμα μεθόδου isNullOrEmpty :

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

stringExtensions.isNullOrEmpty(null);

// returns: true

Μορφοποιητής τιμών

Η λειτουργική μονάδα παρέχει τις ακόλουθες συναρτήσεις, διασυνδέσεις και:

IValueFormatter

Αυτή η διασύνδεση περιγράφει δημόσιες μεθόδους και ιδιότητες του μορφοποιητή.

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

IValueFormatter.format

Αυτή η μέθοδος μορφοποιήσει την καθορισμένη τιμή.

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

Παραδείγματα για IValueFormatter.formatτο :

Οι μορφές χιλιάδων

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

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

iValueFormatter.format(5678);

// returns: "5.68K"

Οι μορφές εκατομμυρίου

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

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

iValueFormatter.format(1234567890);

// returns: "1234.57M"

Οι μορφές δισεκατομμυρίου

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

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

iValueFormatter.format(1234567891236);

// returns: 1234.57bn

Η μορφή τρισεκατομμυρίου

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

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

iValueFormatter.format(1234567891236);

// returns: 1.23T

Η μορφή εκθέτη

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

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

iValueFormatter.format(1234567891236);

// returns: 1.234568E+012

Ο επιλογέας κουλτούρας

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

Η μορφή ποσοστού

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 %

Η μορφή ημερομηνιών

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

Η δυαδική μορφή

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

let iValueFormatter = valueFormatter.create({});

iValueFormatter.format(true);

// returns: True

Η προσαρμοσμένη ακρίβεια

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

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

iValueFormatter.format(3.141592653589793);

// returns: 3.142

Για παράδειγμα, ανατρέξτε στον κώδικα προσαρμοσμένης απεικόνισης.

ValueFormatterOptions

Αυτή η διασύνδεση περιγράφει options το IValueFormatter και επιλογές συνάρτησης create .

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

δημιουργία

Αυτή η μέθοδος δημιουργεί μια παρουσία του IValueFormatter.

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

function create(options: ValueFormatterOptions): IValueFormatter;

Παράδειγμα χρήσης της δημιουργίας

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

valueFormatter.create({});

// returns: an instance of IValueFormatter.

Μορφή

Εναλλακτικός τρόπος μορφοποίησης της τιμής IValueFormatterχωρίς δημιουργία . Χρήσιμο για υποθέσεις με δυναμική συμβολοσειρά μορφών

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

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

Παράδειγμα χρήσης μορφής

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

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

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

Προσθήκη της τοπικής γλώσσας στην απεικόνιση Power BI

Κοινή χρήση μέσω

Βοηθητικά προγράμματα μορφοποίησης

Υπηρεσία μέτρησης κειμένου

Διασύνδεση TextProperties

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Επεκτάσεις συμβολοσειρών

λήγειμε

equalIgnoreCase

startsWith

περιέχει

isNullOrEmpty

Μορφοποιητής τιμών

IValueFormatter

IValueFormatter.format

Οι μορφές χιλιάδων

Οι μορφές εκατομμυρίου

Οι μορφές δισεκατομμυρίου

Η μορφή τρισεκατομμυρίου

Η μορφή εκθέτη

Ο επιλογέας κουλτούρας

Η μορφή ποσοστού

Η μορφή ημερομηνιών

Η δυαδική μορφή

Η προσαρμοσμένη ακρίβεια

ValueFormatterOptions

δημιουργία

Παράδειγμα χρήσης της δημιουργίας

Μορφή

Παράδειγμα χρήσης μορφής

Σχόλια

Πρόσθετοι πόροι

Κοινή χρήση μέσω

Βοηθητικά προγράμματα μορφοποίησης

Υπηρεσία μέτρησης κειμένου

Διασύνδεση TextProperties

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Επεκτάσεις συμβολοσειρών

λήγειμε

equalIgnoreCase

startsWith

περιέχει

isNullOrEmpty

Μορφοποιητής τιμών

IValueFormatter

IValueFormatter.format

Οι μορφές χιλιάδων

Οι μορφές εκατομμυρίου

Οι μορφές δισεκατομμυρίου

Η μορφή τρισεκατομμυρίου

Η μορφή εκθέτη

Ο επιλογέας κουλτούρας

Η μορφή ποσοστού

Η μορφή ημερομηνιών

Η δυαδική μορφή

Η προσαρμοσμένη ακρίβεια

ValueFormatterOptions

δημιουργία

Παράδειγμα χρήσης της δημιουργίας

Μορφή

Παράδειγμα χρήσης μορφής

Σχετικό περιεχόμενο

Σχόλια

Πρόσθετοι πόροι