在 Power BI 自定义视觉对象中访问条件格式的格式值

Question

我是 Power BI 自定义视觉开发的新手，正在遵循 Microsoft 文档，但我发现它在条件格式方面并不是特别有帮助。

我正在使用 HTML 元素构建视觉效果，并且我想将条件格式应用于元素的背景颜色。我创建了一个简化的示例，可在此处找到：https://github.com/DanielSzentimrey-Harrach/sampleVisual

在

settings.ts

中，我在颜色选择器上指定了instanceKind属性，因此我可以配置条件格式：

class DataPointCardSettings extends FormattingSettingsCard {
    defaultColor = new formattingSettings.ColorPicker({
        name: "defaultColor",
        displayName: "Default color",
        value: { value: "" },
        instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
    });

    name: string = "dataPoint";
    displayName: string = "Data colors";
    slices: Array<FormattingSettingsSlice> = [this.defaultColor];
}

在我的

visual.ts

中，我只是迭代输入值，并在跨度内显示类别名称。我使用测量值来设置跨度的宽度。 （这个简单的逻辑只是为了这个例子。）：

public update(options: VisualUpdateOptions) {
    this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews[0]);
    
    const dataView: powerbi.DataView = options.dataViews[0];
    const categoricalMapping = dataView.categorical;

    this.target.innerHTML = "";

    for (let i=0; i < categoricalMapping.categories[0].values.length; i++) {
        const span: HTMLElement = document.createElement("span");
        span.appendChild(document.createTextNode(categoricalMapping.categories[0].values[i].toString()));
        span.style.width = 50 * +categoricalMapping.values[0].values[i].toString() + "px";
        span.style.backgroundColor = this.formattingSettings.dataPointCard.defaultColor.value.value;
        this.target.appendChild(span);
    }
}

我知道倒数第二行（

span.style.backgroundColor...

）不正确，但我不知道如何访问每个单独项目的条件格式的具体结果。

在 Power BI 中，我有以下内容：

• 输入数据
  
• 数据映射
  
• 格式设置
  

请注意我如何从“颜色”列中选择 first 值，对于 Cat3，该值是“蓝色”。

此后，在我的视觉中，所有跨度都变成蓝色。

任何帮助将非常感激。

Answer 1

我想提供这个问题的答案，以防对其他人有帮助。事实证明，所有细节确实都在文档中，我只需要一些尝试和错误来弄清楚。

我已经创建了一个提交，其中包含我必须应用于示例项目才能使条件格式正常工作的最低限度的更改，可以在此处访问：

https://github.com/DanielSzentimrey-Harrach/sampleVisual/commit/cbda28f18f4959931afda64161615d3745dbf64e

简而言之，在

settings.ts

中，我必须为格式化对象添加 instanceKind 和 selector 属性。

在此之后，一旦定义了规则，特定的颜色值就可以在 dataView.categorical.categories[0].objects[]中获得。