Question

上面是本教程中的卡片，位于https://docs.microsoft.com/en-us/power-bi/developer/custom-visual-develop-tutorial。这是视觉的相关代码。

我希望数字显示为百分比值，即15.4％，这是度量中的格式。

我已经搜索了github，microsoft，google等，以寻求针对此问题的解决方案。在发布之前，我还浏览了Stack Overflow上的所有建议问题。任何帮助您使数字格式与度量格式匹配的帮助都将不胜感激。

这是视觉的相关代码。（很抱歉）

visual.ts

"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import DataView = powerbi.DataView;
import * as d3 from "d3";
import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;

import { VisualSettings } from "./settings";
import { rgb, RGBColor, Color } from "d3";
export class Visual implements IVisual {
    private visualSettings: VisualSettings;
    private svg: d3.Selection<SVGElement, any, any, any>;
    private container: d3.Selection<SVGElement, any, any, any>;
    private circle: d3.Selection<SVGElement, any, any, any>;
    private textLabel: d3.Selection<SVGElement, any, any, any>;
    private textValue: d3.Selection<SVGElement, any, any, any>;
    private settings: VisualSettings;

    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.svg = d3.select(options.element)
            .append('svg')
            .classed('circlecard', true);
        this.container = this.svg.append("g")
            .classed('container', true);
        this.circle = this.container.append("circle")
            .classed('circle', true);
        this.textValue = this.container.append("text")
            .classed("textValue", true);
        this.textLabel = this.container.append("text")
            .classed("textLabel", true);
    }
    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
        const settings: VisualSettings = this.visualSettings ||
            VisualSettings.getDefault() as VisualSettings;
        return VisualSettings.enumerateObjectInstances(settings, options);
    }

    public update(options: VisualUpdateOptions) {
        this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
        let dataView: DataView = options.dataViews[0];
        let width: number = options.viewport.width;
        let height: number = options.viewport.height;
        this.svg.attr("width", width)
            .attr("height", height);
        let radius: number = Math.min(width, height) / 2.2;
        this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);

        this.visualSettings.circle.circleThickness = Math.max(0, this.visualSettings.circle.circleThickness);

        this.visualSettings.circle.circleThickness = Math.min(10, this.visualSettings.circle.circleThickness);
        this.circle
            .style("fill", this.visualSettings.circle.circleColor)
            .style("stroke", this.visualSettings.circle.circleColor)
            .style("stroke-width",this.visualSettings.circle.circleThickness)
            .attr("r", radius)
            .attr("cx", width / 2)
            .attr("cy", height / 2);
        let fontSizeValue: number = Math.min(width, height) / 5;
        this.textValue
            .text(dataView.single.value as string)
            .attr("x", "50%")
            .attr("y", "50%")
            .attr("dy", "0.35em")
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeValue + "px");
        let fontSizeLabel: number = fontSizeValue / 4;
        this.textLabel
            .text(dataView.metadata.columns[0].displayName)
            .attr("x", "50%")
            .attr("y", height / 2)
            .attr("dy", fontSizeValue / 1.2)
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeLabel + "px");
    }

    private static parseSettings(dataView: DataView): VisualSettings {
        return VisualSettings.parse(dataView) as VisualSettings;
    }

    /**
     * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
     * objects and properties you want to expose to the users in the property pane.
     *
     */
}

capabilities.json

{
    "dataRoles": [
        {
            "displayName": "Measure",
            "name": "measure",
            "kind": "Measure"
           }
    ],
    "objects": {
        "circle": {
            "displayName": "Circle",
            "properties": {
                "circleColor": {
                    "displayName": "Color",
                    "description": "The fill color of the circle.",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "circleThickness": {
                    "displayName": "Thickness",
                    "description": "The circle thickness.",
                    "type": {
                        "numeric": true
                        }
                    }
                }
            }
        },
    "dataViewMappings": [
        {
            "conditions": [
                { "measure": { "max": 1 } }
            ],
            "single": {
                "role": "measure"
            }
        }
    ]
}

settings.ts

"use strict";

import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils";
import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser;

export class CircleSettings {
  public circleColor: string = "white";
  public circleThickness: number = 2;
 }
 export class VisualSettings extends DataViewObjectsParser {
  public circle: CircleSettings = new CircleSettings();
 }

感谢您查看此内容。

Answer 1

我始终处理格式的一种方式（当无法通过界面访问时）正在创建包含我想要的格式的自定义度量。

我创建了2张卡片以显示未格式化和已格式化的值：

度量公式： Fmt_value = FORMAT（SUM（'Table'[Column1]），“＃，## 0.0％;（＃，## 0.0％）”）

查看图片：

Formatting Numeric values as %

Adding a Measure for Formatting

希望这会有所帮助。

自定义Power BI Visual的数字格式问题

1 个答案: