Partager via

Ajouter des couleurs à vos visuels Power BI

  • Article

Cet article explique comment ajouter des couleurs à vos visuels personnalisés et comment gérer des points de données pour un visuel avec des couleurs définies.

IVisualHost, collection de propriétés et services qui interagissent avec l’hôte visuel, peut définir des couleurs dans des visuels personnalisés avec le service colorPalette. L’exemple de code de cet article modifie le visuel SampleBarChart. Pour le code source du visuel SampleBarChart, consultez barChart.ts.

Pour essayer de créer des visuels, consultez Développement d’un visuel de carte ronde Power BI.

Ajouter de la couleur aux points de données

Pour représenter chaque point de données dans une couleur différente, ajoutez la variable color à l’interface BarChartDataPoint, comme le montre l’exemple suivant :

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

Utiliser le service de palette de couleurs

Le service colorPalette gère les couleurs utilisées dans votre visuel. Une instance du service colorPalette est disponible sur IVisualHost.

Définissez la palette de couleurs dans la méthode update avec le code suivant :

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

public update(options: VisualUpdateOptions) {

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

Affecter une couleur à des points de données

Ensuite, spécifiez dataPoints. Dans cet exemple, chacune des adresses dataPoints a une valeur, une catégorie et une propriété de couleur définies. dataPoints peut également inclure d’autres propriétés.

Dans SampleBarChart, la méthode visualTransform fait partie du ViewModel de graphique à barres. Étant donné que la méthode visualTransform itère à travers tous les calculs dataPoints, il s’agit de l’emplacement idéal pour attribuer des couleurs, comme dans le code suivant :


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

Appliquez ensuite les données de dataPoints sur la sélection d3barSelection à l’intérieur de la méthode 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();

Étapes suivantes