Delen via

Kleuren toevoegen aan uw Power BI-visuals

  • Artikel

In dit artikel wordt beschreven hoe u kleuren toevoegt aan uw aangepaste visuals en hoe u gegevenspunten kunt verwerken voor een visual met gedefinieerde kleuren.

IVisualHost, de verzameling eigenschappen en services die communiceren met de visualhost, kan kleuren definiëren in aangepaste visuals met de colorPalette service. Met de voorbeeldcode in dit artikel wordt de visual SampleBarChart gewijzigd. Zie barChart.ts voor de broncode van de SampleBarChart-visual.

Zie Een visual met een cirkelkaart in Power BI ontwikkelen om aan de slag te gaan met het maken van visuals.

Kleur toevoegen aan gegevenspunten

Als u elk gegevenspunt in een andere kleur wilt weergeven, voegt u de color variabele toe aan de BarChartDataPoint interface, zoals wordt weergegeven in het volgende voorbeeld:

/**
 * 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;
};

De kleurenpaletservice gebruiken

De colorPalette service beheert de kleuren die in uw visual worden gebruikt. Er is een exemplaar van de colorPalette service beschikbaar op IVisualHost.

Definieer het kleurenpalet in de update methode met de volgende code:

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

public update(options: VisualUpdateOptions) {

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

Kleur toewijzen aan gegevenspunten

Geef dataPointsvervolgens op. In dit voorbeeld heeft elk van de functies dataPoints een gedefinieerde waarde, categorie en kleureigenschap. dataPoints kan ook andere eigenschappen bevatten.

visualTransform De SampleBarChartmethode maakt deel uit van het weergavemodel Staafdiagram. Omdat de visualTransform methode alle dataPoints berekeningen doorloopt, is het de ideale plek om kleuren toe te wijzen, zoals in de volgende code:


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,
        });
    }
}

Pas vervolgens de gegevens toe van dataPoints de d3-selectiebarSelection in de update methode:

// 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();

Gerelateerde inhoud