Dela via

Lägga till färger i dina visuella Power BI-objekt

  • Artikel

Den här artikeln beskriver hur du lägger till färger i dina anpassade visuella objekt och hur du hanterar datapunkter för ett visuellt objekt som har definierade färger.

IVisualHostkan samlingen av egenskaper och tjänster som interagerar med den visuella värden definiera färger i anpassade visuella objekt med colorPalette tjänsten. Exempelkoden i den här artikeln ändrar det visuella SampleBarChart-objektet. Se barChart.ts för den visuella sampleBarChart-källkoden.

Information om hur du kommer igång med att skapa visuella objekt finns i Utveckla ett visuellt Power BI-cirkelkort.

Lägga till färg i datapunkter

Om du vill representera varje datapunkt i en annan färg lägger du till variabeln color BarChartDataPoint i gränssnittet, som du ser i följande exempel:

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

Använda färgpaletttjänsten

Tjänsten colorPalette hanterar de färger som används i ditt visuella objekt. En instans av tjänsten är tillgänglig på colorPalette IVisualHost.

Definiera färgpaletten i update metoden med följande kod:

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

public update(options: VisualUpdateOptions) {

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

Tilldela färg till datapunkter

Ange dataPointssedan . I det här exemplet har var och en av dataPoints egenskaperna ett definierat värde, en kategori och en färg. dataPoints kan även innehålla andra egenskaper.

visualTransform I SampleBarChartär metoden en del av vyn Stapeldiagram. visualTransform Eftersom metoden itererar genom alla dataPoints beräkningar är det den perfekta platsen för att tilldela färger, som i följande kod:


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

Använd sedan data från dataPoints till 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();

Relaterat innehåll