Bagikan melalui

Menambahkan warna ke visual Power BI Anda

Artikel ini menjelaskan cara menambahkan warna ke visual kustom Anda dan cara menangani titik data untuk visual yang telah menentukan warna.

IVisualHost, kumpulan properti dan layanan yang berinteraksi dengan host visual, dapat mengatur warna dalam visual kustom dengan layanan colorPalette. Contoh kode dalam artikel ini memodifikasi Visual SampleBarChart. Untuk kode sumber visual SampleBarChart, lihat barChart.ts.

Untuk mulai membuat visual, lihat Mengembangkan visual kartu lingkaran Power BI.

Menambahkan warna ke titik data

Untuk mewakili setiap titik data dalam warna yang berbeda, tambahkan color variabel ke BarChartDataPoint antarmuka, seperti yang ditunjukkan dalam contoh berikut:

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

Menggunakan layanan palet warna

Layanan ini colorPalette mengelola warna yang digunakan dalam visual Anda. Instance dari layanan colorPalette tersedia di IVisualHost.

Tentukan palet warna dalam update metode dengan kode berikut:

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

public update(options: VisualUpdateOptions) {

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

Menetapkan warna ke titik data

Selanjutnya, tentukan dataPoints. Dalam contoh ini, masing-masing dataPoints memiliki nilai, kategori, dan properti warna yang ditentukan. dataPoints juga dapat menyertakan properti lain.

Dalam SampleBarChart, metode visualTransform merupakan bagian dari viewmodel Bagan Batang. Karena metode visualTransform mengiterasi melalui semua dataPoints perhitungan, ini merupakan tempat yang ideal untuk memberikan warna, seperti dalam kode berikut:


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

Kemudian, terapkan data dari dataPoints ke d3-selection barSelection di dalam metode 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();

Konten terkait