ユーティリティの書式設定

[アーティクル]
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...

文字列の拡張機能

このモジュールには、次の関数が用意されています。

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

contains

この関数では、文字列が、指定した部分文字列を含むかどうかが確認されます。

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

1,000 単位形式

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

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

iValueFormatter.format(5678);

// returns: "5.68K"

100 万単位形式

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

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

iValueFormatter.format(1234567890);

// returns: "1234.57M"

10 億単位形式

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

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

iValueFormatter.format(1234567891236);

// returns: 1234.57bn

1 兆単位形式

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

このインターフェイスには、IValueFormatter の options と 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;
}

create

このメソッドでは、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.

format

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

文字列の拡張機能

endsWith

equalIgnoreCase

startsWith

contains

isNullOrEmpty

値フォーマッタ

IValueFormatter

IValueFormatter.format

1,000 単位形式

100 万単位形式

10 億単位形式

1 兆単位形式

指数形式

カルチャセレクター

パーセンテージ形式

日付形式

ブール形式

カスタマイズした精度

ValueFormatterOptions

create

create の使用例

format

書式設定の使用例

フィードバック

その他のリソース

次の方法で共有

ユーティリティの書式設定

テキスト測定サービス

TextProperties インターフェイス

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

文字列の拡張機能

endsWith

equalIgnoreCase

startsWith

contains

isNullOrEmpty

値フォーマッタ

IValueFormatter

IValueFormatter.format

1,000 単位形式

100 万単位形式

10 億単位形式

1 兆単位形式

指数形式

カルチャ セレクター

パーセンテージ形式

日付形式

ブール形式

カスタマイズした精度

ValueFormatterOptions

create

create の使用例

format

書式設定の使用例

関連するコンテンツ

フィードバック

その他のリソース

カルチャセレクター