Del via

Føj farver til dine Power BI-visualiseringer

  • Artikel

I denne artikel beskrives det, hvordan du føjer farver til dine brugerdefinerede visualiseringer, og hvordan du håndterer datapunkter for en visualisering, der har definerede farver.

IVisualHost, kan samlingen af egenskaber og tjenester, der interagerer med den visuelle vært, definere farver i brugerdefinerede visualiseringer med colorPalette tjenesten. Eksempelkoden i denne artikel ændrer SampleBarChart-visualiseringen. Du kan finde kildekoden til sampleBarChart-visualiseringen under barChart.ts.

Hvis du vil i gang med at oprette visualiseringer, skal du se Udvikling af en Power BI-cirkelkortvisualisering.

Føj farve til datapunkter

Hvis du vil repræsentere hvert datapunkt i en anden farve, skal du føje variablen color til grænsefladen BarChartDataPoint som vist i følgende eksempel:

/**
 * Interface for BarChart data points.
 *
 * @interface
 * @property {number} value    - Data value for point.
 * @property {string} category - Corresponding category of data value.
 * @property {string} color    - Color corresponding to data point.
 */
interface BarChartDataPoint {
    value: number;
    category: string;
    color: string;
};

Brug farvepalettjenesten

Tjenesten colorPalette administrerer de farver, der bruges i din visualisering. Der er en forekomst af colorPalette -tjenesten tilgængelig på IVisualHost.

Definer farvepaletten i update metoden med følgende kode:

constructor(options: VisualConstructorOptions) {
        this.host = options.host; // host: IVisualHost
        ...
    }

public update(options: VisualUpdateOptions) {

    let colorPalette: IColorPalette = host.colorPalette;
    ...
}

Tildeling af farve til datapunkter

dataPointsAngiv derefter . I dette eksempel har hver af en dataPoints defineret værdi-, kategori- og farveegenskab. dataPoints kan også indeholde andre egenskaber.

I SampleBarCharter metoden visualTransform en del af visningsmodellen Søjlediagram. Da metoden visualTransform gentager alle dataPoints beregninger, er det det ideelle sted at tildele farver som i følgende kode:


public update(options: VisualUpdateOptions) {
    ....
    let viewModel: BarChartViewModel = visualTransform(options, this.host);
    ....
}

function visualTransform(options: VisualUpdateOptions, host: IVisualHost): BarChartViewModel {
    let colorPalette: IColorPalette = host.colorPalette; // host: IVisualHost
    for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
        barChartDataPoints.push({
            category: category.values[i],
            value: dataValue.values[i],
            color: colorPalette.getColor(category.values[i]).value,
        });
    }
}

Anvend derefter dataene fra dataPoints på d3-markeringenbarSelection i update metoden :

// This code is for d3 v5
// in d3 v5 for this case we should use merge() after enter() and apply changes on barSelectionMerged
this.barSelection = this.barContainer
    .selectAll('.bar')
    .data(this.barDataPoints);

const barSelectionMerged = this.barSelection
    .enter()
    .append('rect')
    .merge(<any>this.barSelection);

barSelectionMerged.classed('bar', true);

barSelectionMerged
.attr("width", xScale.bandwidth())
.attr("height", d => height - yScale(<number>d.value))
.attr("y", d => yScale(<number>d.value))
.attr("x", d => xScale(d.category))
.style("fill", (dataPoint: BarChartDataPoint) => dataPoint.color)
.style("stroke", (dataPoint: BarChartDataPoint) => dataPoint.strokeColor)
.style("stroke-width", (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`);

this.barSelection
    .exit()
    .remove();

Relateret indhold