Compartir a través de

Adición de colores a los objetos visuales de Power BI

  • Artículo

En este artículo, se describe cómo agregar colores a los objetos visuales personalizados y cómo controlar los puntos de datos de un objeto visual que tiene colores definidos.

IVisualHost, la colección de propiedades y servicios que interactúan con el host visual, puede definir colores en objetos visuales personalizados con el servicio colorPalette. En el código de ejemplo de este artículo se modifica el objeto visual SampleBarChart. Para el código fuente del objeto visual SampleBarChart, consulte barChart.ts.

Para empezar a crear objetos visuales, vea Desarrollo de un objeto visual Circle Card de Power BI.

Incorporación de color a los puntos de datos

Si desea representar cada punto de datos con un color distinto, agregue la variable color a la interfaz BarChartDataPoint, tal como se muestra en el ejemplo siguiente:

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

Uso del servicio de la paleta de colores

El servicio colorPalette administra los colores usados en el objeto visual. Una instancia del servicio colorPalette está disponible en IVisualHost.

Defina la paleta de colores en el método update con el código siguiente:

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

public update(options: VisualUpdateOptions) {

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

Asignación de color a los puntos de datos

Luego, especifique dataPoints. En este ejemplo, cada uno de los dataPoints tiene una propiedad de color, categoría y valor definida. dataPoints también puede incluir otras propiedades.

En SampleBarChart, el método visualTransform forma parte del modelo de vista Gráfico de barras. Dado que el método recorre en iteración el cálculo de visualTransform en dataPoints, es el lugar ideal para asignar colores, como en el código siguiente:


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

Luego, aplique los datos de dataPoints a barSelection de la selección d3 dentro del método update:

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

Pasos siguientes