Biçimlendirme yardımcı programları

Makale
10/10/2024

Biçimlendirme yardımcı programları, değerleri biçimlendirmek için sınıfları, arabirimleri ve yöntemleri içerir. Ayrıca bir SVG/HTML belgesindeki dizeleri işlemek ve metin boyutunu ölçmek için genişletici yöntemleri içerir.

Metin ölçüm hizmeti

Modül aşağıdaki işlevleri ve arabirimleri sağlar:

TextProperties arabirimi

Bu arabirim, metnin ortak özelliklerini açıklar.

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

measureSvgTextWidth

Bu işlev, metnin genişliğini belirli SVG metin özellikleriyle ölçer.

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

kullanma measureSvgTextWidthörneği:

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

Bu işlev, verilen SVG metin özelliklerine sahip bir düzeltme döndürür.

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

kullanma measureSvgTextRectörneği:

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

Bu işlev, belirli SVG metin özellikleriyle metnin yüksekliğini ölçer.

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

kullanma measureSvgTextHeightörneği:

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

Bu işlev, belirli SVG metin özelliklerinin temelini döndürür.

function estimateSvgTextBaselineDelta(textProperties: TextProperties): number;

Örneğin:

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

Bu işlev, belirli SVG metin özellikleriyle metnin yüksekliğini tahmin eder.

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

kullanma estimateSvgTextHeightörneği:

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

Bir örnek için bkz . özel görsel kodu.

measureSvgTextElementWidth

Bu işlev svgElement'in genişliğini ölçer.

function measureSvgTextElementWidth(svgElement: SVGTextElement): number;

measureSvgTextElementWidth kullanma örneği:

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

Bu işlev, verilen DOM öğesinin metin ölçüm özelliklerini getirir.

function getMeasurementProperties(element: Element): TextProperties;

kullanma getMeasurementPropertiesörneği:

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

Bu işlev, verilen SVG metin öğesinin metin ölçüm özelliklerini getirir.

function getSvgMeasurementProperties(svgElement: SVGTextElement): TextProperties;

kullanma getSvgMeasurementPropertiesörneği:

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

Bu işlev bir div öğesinin genişliğini döndürür.

function getDivElementWidth(element: JQuery): string;

kullanma getDivElementWidthörneği:

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

Etiketin metin boyutunu kullanılabilir boyutla karşılaştırır ve kullanılabilir boyut daha küçük olduğunda üç noktayı işler.

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

kullanma getTailoredTextOrDefaultörneği:

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

Dize uzantıları

Modül aşağıdaki işlevleri sağlar:

Endswith

Bu işlev, bir dizenin alt dizeyle bitip bitmediğini denetler.

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

kullanma endsWithörneği:

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

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

// returns: true

equalIgnoreCase

Bu işlev dizeleri karşılaştırır ve büyük/küçük harf yoksayır.

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

kullanma equalIgnoreCaseörneği:

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

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

// returns: true

Startswith

Bu işlev, bir dizenin alt dizeyle başlayıp başlamadiğini denetler.

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

kullanma startsWithörneği:

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

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

// returns: true

içerir

Bu işlev, bir dizenin belirtilen alt dizeyi içerip içermediğini denetler.

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

Yöntem kullanma contains örneği:

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

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

// returns: true

ısnullorempty

Dizenin null veya tanımsız veya boş olup olmadığını denetler.

function isNullOrEmpty(value: string): boolean;

Yöntem örneği isNullOrEmpty :

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

stringExtensions.isNullOrEmpty(null);

// returns: true

Değer biçimlendirici

Modül aşağıdaki işlevleri, arabirimleri ve sınıfları sağlar:

IValueFormatter

Bu arabirim, biçimlendiricinin genel yöntemlerini ve özelliklerini açıklar.

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

IValueFormatter.format

Bu yöntem belirtilen değeri biçimlendirdi.

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

için IValueFormatter.formatörnekler:

Bin biçim

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

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

iValueFormatter.format(5678);

// returns: "5.68K"

Milyon biçim

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

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

iValueFormatter.format(1234567890);

// returns: "1234.57M"

Milyar biçim

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

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

iValueFormatter.format(1234567891236);

// returns: 1234.57bn

Trilyon biçimi

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

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

iValueFormatter.format(1234567891236);

// returns: 1.23T

Üs biçimi

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

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

iValueFormatter.format(1234567891236);

// returns: 1.234568E+012

Kültür seçici

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

Yüzde biçimi

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 %

Tarih biçimi

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

Boole biçimi

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

let iValueFormatter = valueFormatter.create({});

iValueFormatter.format(true);

// returns: True

Özelleştirilmiş duyarlık

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

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

iValueFormatter.format(3.141592653589793);

// returns: 3.142

Bir örnek için bkz . özel görsel kodu.

ValueFormatterOptions

Bu arabirim, IValueFormatter ve işlev seçeneklerini create açıklaroptions.

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

oluşturmaya

Bu yöntem bir IValueFormatter örneği oluşturur.

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

function create(options: ValueFormatterOptions): IValueFormatter;

Oluşturma kullanma örneği

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

valueFormatter.create({});

// returns: an instance of IValueFormatter.

format

değerini oluşturmadan IValueFormatterbiçimlendirmenin alternatif yolu. Dinamik biçim dizesi olan durumlar için kullanışlıdır

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

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

Biçim kullanma örneği

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 görselinize yerel dil ekleme

Aracılığıyla paylaş

Biçimlendirme yardımcı programları

Metin ölçüm hizmeti

TextProperties arabirimi

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Dize uzantıları

Endswith

equalIgnoreCase

Startswith

içerir

ısnullorempty

Değer biçimlendirici

IValueFormatter

IValueFormatter.format

Bin biçim

Milyon biçim

Milyar biçim

Trilyon biçimi

Üs biçimi

Kültür seçici

Yüzde biçimi

Tarih biçimi

Boole biçimi

Özelleştirilmiş duyarlık

ValueFormatterOptions

oluşturmaya

Oluşturma kullanma örneği

format

Biçim kullanma örneği

Geri Bildirim

Ek kaynaklar

Aracılığıyla paylaş

Biçimlendirme yardımcı programları

Metin ölçüm hizmeti

TextProperties arabirimi

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Dize uzantıları

Endswith

equalIgnoreCase

Startswith

içerir

ısnullorempty

Değer biçimlendirici

IValueFormatter

IValueFormatter.format

Bin biçim

Milyon biçim

Milyar biçim

Trilyon biçimi

Üs biçimi

Kültür seçici

Yüzde biçimi

Tarih biçimi

Boole biçimi

Özelleştirilmiş duyarlık

ValueFormatterOptions

oluşturmaya

Oluşturma kullanma örneği

format

Biçim kullanma örneği

İlgili içerik

Geri Bildirim

Ek kaynaklar