แชร์ผ่าน

ยูทิลิตี้การจัดรูปแบบ

  • บทความ

ยูทิลิตี้การจัดรูปแบบประกอบด้วยคลาส อินเทอร์เฟซ และวิธีการจัดรูปแบบค่า นอกจากนี้ยังประกอบด้วยเมทอต extender เพื่อประมวลผลสตริงและวัดขนาดข้อความในเอกสาร 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

ฟังก์ชันนี้คืนค่า rect ด้วยคุณสมบัติข้อความ 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...

ส่วนขยายของสตริง

โมดูลมอบฟังก์ชันต่อไปนี้:

endsWith

ฟังก์ชันนี้ตรวจสอบว่าสตริงลงท้ายด้วยซับสตริงหรือไม่

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

Value formatter

โมดูลมอบฟังก์ชัน อินเตอร์เฟส และคลาสต่อไปนี้:

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

รูปแบบเปอร์เซ็นต์

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: 11/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;

ตัวอย่างของการใช้ create

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 ของคุณ