Aracılığıyla paylaş

Power BI görsellerinize renk ekleme

Bu makalede, özel görsellerinize renk ekleme ve tanımlı renkler içeren bir görsel için veri noktalarını işleme açıklanmaktadır.

IVisualHost, görsel konakla etkileşim kuran özellikler ve hizmetler koleksiyonu, colorPalette hizmetiyle birlikte özel görsellerde renkleri tanımlayabilir. Bu makaledeki örnek kod SampleBarChart görselini değiştirir. SampleBarChart görsel kaynak kodu için bkz. barChart.ts.

Görsel oluşturmaya başlamak için bkz. Power BI daire kartı görseli geliştirme.

Veri noktalarına renk ekleme

Her veri noktasını farklı bir renkte göstermek için BarChartDataPoint aşağıdaki örnekte gösterildiği gibi değişkeni arabirime ekleyincolor:

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

Renk paleti hizmetini kullanma

Hizmet, colorPalette görselinizde kullanılan renkleri yönetir. colorPalette hizmetinin bir örneği IVisualHost'de mevcuttur.

yönteminde renk paletini update aşağıdaki kodla tanımlayın:

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

public update(options: VisualUpdateOptions) {

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

Veri noktalarına renk atama

Ardından belirtin dataPoints. Bu örnekte, her biri tanımlı bir değere, kategoriye dataPoints ve renk özelliğine sahiptir. dataPoints diğer özellikleri de içerebilir.

visualTransform içinde SampleBarChartyöntemi Çubuk Grafik görünüm modelinin bir parçasıdır. visualTransform yöntemi tüm dataPoints hesaplamalarda yinelediğinden, aşağıdaki kodda olduğu gibi renkleri atamak için ideal yerdir:


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

Ardından, dataPoints verilerini d3 seçimine, yöntem update içinde barSelection uygulayın.

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

İlgili içerik