Freigeben über

Hinzufügen von Farben zu Power BI-Visuals

  • Artikel

In diesem Artikel wird beschrieben, wie Sie Ihren benutzerdefinierten visuellen Elementen Farben hinzufügen und mit Datenpunkten für ein visuelles Element umgehen, für das Farben definiert wurden.

IVisualHost, die Auflistung von Eigenschaften und Diensten, die mit dem visuellen Host interagieren, kann mit dem colorPalette-Dienst Farben in benutzerdefinierten visuellen Elementen definieren. Der Beispielcode in diesem Artikel modifiziert das Visual SampleBarChart. Den Quellcode des visuellen Elements SampleBarChart finden Sie unter barChart.ts.

Informationen zu den ersten Schritten beim Erstellen eines Visuals finden Sie unter Entwickeln eines kreisförmigen Kartenvisuals in Power BI.

Hinzufügen von Farbe zu Datenpunkten

Damit jeder Datenpunkt in einer anderen Farbe dargestellt werden kann, fügen Sie der Schnittstelle BarChartDataPoint die Variable color hinzu, wie im folgenden Beispiel gezeigt:

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

Verwenden des Farbpalettendiensts

Der Dienst colorPalette verwaltet die in Ihrem Visual verwendeten Farben. Eine Instanz des colorPalette-Diensts ist auf IVisualHost verfügbar.

Definieren Sie die Farbpalette in der update-Methode mit dem folgenden Code:

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

public update(options: VisualUpdateOptions) {

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

Zuweisen von Farbe zu Datenpunkten

Geben Sie als Nächstes dataPoints an. In diesem Beispiel weist jeder der dataPoints einen definierten Wert, eine Kategorie und eine Farbeigenschaft auf. dataPoints kann auch andere Eigenschaften einschließen.

In SampleBarChart ist die Methode visualTransform Bestandteil des Balkendiagramm-Ansichtsmodells. Da die visualTransform-Methode eine Iteration durch alle dataPoints-Berechnungen vornimmt, eignet sie sich ideal, um wie im folgenden Code Farben zuzuweisen:


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

Wenden Sie dann die Daten von dataPoints auf die d3-Auswahl barSelection innerhalb der update-Methode an:

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

Nächste Schritte