Condividi tramite

Aggiungere colori agli oggetti visivi di Power BI

  • Articolo

Questo articolo descrive come aggiungere colori agli oggetti visivi personalizzati e come gestire i punti dati per un oggetto visivo con colori definiti.

IVisualHost, la raccolta di proprietà e servizi che interagiscono con l'host visivo, può definire i colori negli oggetti visivi personalizzati con il colorPalette servizio. Il codice di esempio in questo articolo modifica l'oggetto visivo SampleBarChart. Per il codice sorgente dell'oggetto visivo SampleBarChart, vedere barChart.ts.

Per iniziare a creare oggetti visivi, vedere Sviluppo di un oggetto visivo circle card di Power BI.

Aggiungere colore ai punti dati

Per rappresentare ogni punto dati in un colore diverso, aggiungere la color variabile all'interfaccia BarChartDataPoint , come illustrato nell'esempio seguente:

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

Usare il servizio tavolozza colori

Il colorPalette servizio gestisce i colori usati nell'oggetto visivo. Un'istanza del colorPalette servizio è disponibile in IVisualHost.

Definire la tavolozza dei colori nel update metodo con il codice seguente:

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

public update(options: VisualUpdateOptions) {

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

Assegnazione del colore ai punti dati

Specificare dataPointsquindi . In questo esempio, ognuno di dataPoints essi ha un valore, una categoria e una proprietà color definiti. dataPoints può includere anche altre proprietà.

In SampleBarChartil visualTransform metodo fa parte del modello di visualizzazione Grafico a barre. Poiché il visualTransform metodo esegue l'iterazione di tutti i dataPoints calcoli, è la posizione ideale per assegnare colori, come nel codice seguente:


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

Applicare quindi i dati da dataPoints alla selezione barSelection d3 all'interno del update metodo :

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

Contenuto correlato