Power BI圆形卡片视觉对象格式化选项添加报错及显示问题求助

错误根源分析 #

• 教程与自动生成代码存在命名不一致：自动生成的settings.ts导出类名为VisualSettingsModel，但教程示例用的是VisualSettings，导致导入报错。
• 替换后视觉空白的核心问题：未正确将设置模型与视觉渲染逻辑绑定，或渲染时未读取设置配置、未处理数值数据的DOM渲染。

代码修改步骤 #

1. 统一settings.ts的导出命名 #

在自动生成的settings.ts末尾添加别名导出，兼容教程命名同时保留自动生成结构：

// settings.ts 文件末尾追加
export type VisualSettings = VisualSettingsModel;
export { VisualSettingsModel as VisualSettings };

2. 修正visual.ts的导入与渲染逻辑 #

确保导入类名统一，同时在update方法中正确读取设置并绑定渲染：

// visual.ts 顶部导入
import { VisualSettings } from "./settings";

// 重写update方法，确保读取设置+渲染数值
public update(options: VisualUpdateOptions) {
    // 解析获取视觉设置
    const settings: VisualSettings = VisualSettings.parse(options.dataViews[0]);
    
    // 渲染标题（绑定设置）
    const titleElement = this.element.querySelector(".title");
    if (titleElement) {
        titleElement.textContent = settings.titleText;
        titleElement.style.color = settings.titleColor;
    }
    
    // 核心：渲染数值（解决空白问题）
    const valueElement = this.element.querySelector(".value");
    if (valueElement && options.dataViews[0]?.categorical?.values[0]?.values[0]) {
        const metricValue = options.dataViews[0].categorical.values[0].values[0];
        valueElement.textContent = metricValue.toString();
        valueElement.style.color = settings.valueColor;
        valueElement.style.fontSize = `${settings.valueFontSize}px`;
    }
    
    // 渲染圆形背景（绑定设置）
    const circleElement = this.element.querySelector(".circle");
    if (circleElement) {
        circleElement.style.backgroundColor = settings.circleColor;
    }
}

3. 确保DOM结构完整 #

在visual.ts的构造函数中创建完整的DOM容器，避免数值元素缺失：

constructor(options: VisualConstructorOptions) {
    this.element = options.element;
    
    // 创建圆形容器
    const circle = document.createElement("div");
    circle.className = "circle";
    this.element.appendChild(circle);
    
    // 创建数值显示元素
    const value = document.createElement("div");
    value.className = "value";
    circle.appendChild(value);
    
    // 创建标题元素
    const title = document.createElement("div");
    title.className = "title";
    this.element.appendChild(title);
}

4. 验证pbiviz.json配置 #

确保配置文件中settings路径指向正确：

"settings": {
    "schemaPath": "settings.json"
}

验证流程 #

1. 运行pbiviz package重新打包视觉文件
2. 在Power BI中导入更新后的.pbiviz文件
3. 添加数据字段，检查数值、标题及格式是否正常显示

内容的提问来源于stack exchange，提问作者Joshua Beno