Condividi tramite

Aggiungere colori agli oggetti visivi di Power BI

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 Sviluppare un oggetto visivo carta circolare 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 servizio colorPalette è disponibile su 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

Quindi, specificare dataPoints. In questo esempio, ciascuno dei dataPoints ha un valore, una categoria e una proprietà colore definiti. dataPoints può includere anche altre proprietà.

In SampleBarChart, il metodo visualTransform è parte del modello di visualizzazione del 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 barSelectiond3 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