Question

我是Power BI Custom Visual的新手，目前正致力于创建一个简单的自定义视觉效果。我实际上想要一个矩形，其颜色根据给定的度量而变化。对于Eg：

如果值＆lt; 100且值＆gt; 0则为蓝色
否则，如果值>> 100则为绿色
其他红色

我使用了以下代码，但由于矩形的颜色不随度量值的变化而变化，因此无效。请让我知道如何实现这一目标

module powerbi.extensibility.visual {

  interface RaggedViewModel{
    dataPoints: RaggedDataPoint[];
};

 interface RaggedDataPoint{
    value:number;
}
export class Visual implements IVisual {
    private svg:D3.Selection;
    private RecContainer:D3.Selection;

    constructor(options: VisualConstructorOptions) {
        this.svg=d3.select(options.element)
                   .append('svg')
                   .classed("circs",true);

       this.RecContainer = this.svg.append("g")
                            .classed("RecContainer",true);             
    }  

    public convertData(options: VisualUpdateOptions): RaggedViewModel
    {
        let dataViews =options.dataViews[0];
         let viewModel:RaggedViewModel;
         let categorical = dataViews.categorical;
         let category = categorical.categories[0];
         let dataValues = categorical.values[0];
         let objects = dataViews.metadata.objects;
         let cirDataPoint:RaggedDataPoint[]=[];

        for (let i = 0, len = Math.max(category.values.length, dataValues.values.length); i < len; i++) {
      cirDataPoint.push({
                value: dataValues.values[i],
        });

         return {
            dataPoints: cirDataPoint,
        };
         }
    }

    public update(options: VisualUpdateOptions) 
    {
   this.RecContainer.selectAll('rect').remove();
    let height =options.viewport.height;
    let width = options.viewport.width;

    this.svg.attr(
    {
        height:height,
        width:width
    });
    this.RecContainer.attr(
    {
        height:height,
        width:width
    });

    let rect=this.RecContainer.append('rect').classed('rectmain', true);  
        rect.attr({
            x:0,
            y:0,
            height:height,
            width:width,
            fill:function(d){
                if(d.value>100)
                    return "#B2EC69"
                else if(d.value<100 && d.value>0 )
                return "#69D2EC"
                else 
                return "#EC7769"
            }
        })
    }
}

}

Answer 1

我知道这是一个非常老的问题，但是对于任何来自Google的人来说，我都应该回答。

this.RecContainer.attr(
{
    height:height,
    width:width
});

let rect=this.RecContainer.append('rect').classed('rectmain', true);  
    rect.attr({
        x:0,
        y:0,
        height:height,
        width:width,
        fill:function(d){
            if(d.value>100)
                return "#B2EC69"
            else if(d.value<100 && d.value>0 )
            return "#69D2EC"
            else 
            return "#EC7769"
        }
    })

前五行用于定义矩形容器的高度和宽度，但也要在更下方定义。

此外，由于代码在更新函数中，因此可以简单地通过变量定义颜色，然后在rect.attr函数中使用该变量。如：

let colour = "#EC7769";

if(d.value > 100)
    colour = "#B2EC69";
else if( (d.value < 100) && (d.value > 0) )
    colour = "#69D2EC";

let rect = this.RecContainer.append('rect').classed('rectmain', true);  
rect.attr({
    x: 0,
    y: 0,
    height: height,
    width: width,
    fill: colour
});

如果有更好的方法，那么我会全力以赴，渴望学习。

使用if else for Power BI Custom Visual更改矩形颜色

1 个答案: