Sdílet prostřednictvím

Přidání barev do vizuálů Power BI

  • Článek

Tento článek popisuje, jak přidat barvy do vlastních vizuálů a jak zpracovat datové body vizuálu, který má definované barvy.

IVisualHost, kolekce vlastností a služeb, které pracují s hostitelem vizuálu, může definovat barvy ve vlastních vizuálech se službou colorPalette . Ukázkový kód v tomto článku upravuje vizuál SampleBarChart. Zdrojový kód vizuálu SampleBarChart naleznete v souboru barChart.ts.

Pokud chcete začít vytvářet vizuály, přečtěte si téma Vývoj vizuálu kruhové karty Power BI.

Přidání barvy do datových bodů

Pokud chcete každý datový bod znázorňovat jinou barvou, přidejte color proměnnou do BarChartDataPoint rozhraní, jak je znázorněno v následujícím příkladu:

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

Použití služby palety barev

Služba colorPalette spravuje barvy použité ve vizuálu. Instance colorPalette služby je k dispozici na serveru IVisualHost.

Definujte paletu barev v update metodě následujícím kódem:

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

public update(options: VisualUpdateOptions) {

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

Přiřazení barvy k datovým bodům

Dále zadejte dataPoints. V tomto příkladu má každá z nich dataPoints definovanou hodnotu, kategorii a vlastnost barev. dataPoints může také obsahovat další vlastnosti.

visualTransform Metoda SampleBarChartje součástí modelu zobrazení pruhového grafu. visualTransform Vzhledem k tomu, že metoda prochází všechny dataPoints výpočty, je ideálním místem pro přiřazení barev, jako v následujícím kódu:


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

Pak použijte data z dataPoints d3-selectionbarSelection uvnitř update metody:

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

Související obsah