Renk yardımcı programları

Bu makale renk yardımcı programları yüklemenize, içeri aktarmanıza ve kullanmanıza yardımcı olur. Power BI görsellerinin veri noktalarına tema ve palet uygulamak için renk yardımcı programları kullanmayı öğrenin.

Önkoşullar

Paketi kullanmak için şunları yükleyin:

node.js (en son LTS sürümünü öneririz)
npm (desteklenen en düşük sürüm 3.0.0'dır)
PowerBI-visuals-tools tarafından oluşturulan özel görsel

Yükleme

Paketi yüklemek için geçerli görselinizle dizinde aşağıdaki komutu çalıştırmanız gerekir:

npm install powerbi-visuals-utils-colorutils --save

Bu komut paketi yükler ve dosyanıza package.json bağımlılık olarak bir paket ekler.

Kullanım

Etkileşim yardımcı programlarını kullanmak için görselin kaynak kodunda gerekli bileşeni içeri aktarmanız gerekir.

import { ColorHelper } from "powerbi-visuals-utils-colorutils";

Power BI görsellerinizde colorUtils'i yüklemeyi ve kullanmayı öğrenin:

[Kullanım Kılavuzu] Kullanım Kılavuzu, paketin genel API'sini açıklar. Her ortak arabirim için bir açıklama ve örnekler sağlar.

Bu paket aşağıdaki sınıfları ve modülleri içerir:

ColorHelper - grafik değerleriniz için farklı renkler oluşturmanıza yardımcı olur
colorUtils - renk biçimlerini dönüştürmeye yardımcı olur

ColorHelper

ColorHelper sınıfı aşağıdaki işlevleri ve yöntemleri sağlar:

getColorForSeriesValue

Bu yöntem belirli bir seri değerinin rengini alır. Açık renk veya varsayılan renk ayarlanmamışsa, renk bu serinin renk ölçeğinden ayrılır.

getColorForSeriesValue(objects: IDataViewObjects, value: PrimitiveValue, themeColorName?: ThemeColorName): string;

getColorForSeriesValue örneği

import powerbi from "powerbi-visuals-api";
import { ColorHelper } from "powerbi-visuals-utils-colorutils";

import DataViewObjects = powerbi.DataViewObjects;

import DataViewValueColumns = powerbi.DataViewValueColumns;
import DataViewValueColumnGroup = powerbi.DataViewValueColumnGroup;
import DataViewObjectPropertyIdentifier = powerbi.DataViewObjectPropertyIdentifier;

import IVisual = powerbi.extensibility.visual.IVisual;
import IColorPalette = powerbi.extensibility.IColorPalette;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;

export class YourVisual implements IVisual {
    // Implementation of IVisual

    private colorPalette: IColorPalette;

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

    public update(visualUpdateOptions: VisualUpdateOptions): void {
        const valueColumns: DataViewValueColumns = visualUpdateOptions.dataViews[0].categorical.values,
            grouped: DataViewValueColumnGroup[] = valueColumns.grouped(),
            defaultDataPointColor: string = "green",
            fillProp: DataViewObjectPropertyIdentifier = {
                objectName: "objectName",
                propertyName: "propertyName"
            };

        let colorHelper: ColorHelper = new ColorHelper(
            this.colorPalette,
            fillProp,
            defaultDataPointColor);

        for (let i = 0; i < grouped.length; i++) {
            let grouping: DataViewValueColumnGroup = grouped[i];

            let color = colorHelper.getColorForSeriesValue(grouping.objects, grouping.name); // returns a color of the series
        }
    }
}

getColorForMeasure

Bu yöntem belirli bir ölçünün rengini alır.

 getColorForMeasure(objects: IDataViewObjects, measureKey: any, themeColorName?: ThemeColorName): string;

Ölçü örneği için renk alma

import powerbi from "powerbi-visuals-api";
import { ColorHelper } from "powerbi-visuals-utils-colorutils";

import DataViewObjects = powerbi.DataViewObjects;
import IVisual = powerbi.extensibility.visual.IVisual;
import IColorPalette = powerbi.extensibility.IColorPalette;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import DataViewObjectPropertyIdentifier = powerbi.DataViewObjectPropertyIdentifier;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;

export class YourVisual implements IVisual {
    // Implementation of IVisual

    private colorPalette: IColorPalette;

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

    public update(visualUpdateOptions: VisualUpdateOptions): void {
        const objects: DataViewObjects = visualUpdateOptions.dataViews[0].categorical.categories[0].objects[0],
            defaultDataPointColor: string = "green",
            fillProp: DataViewObjectPropertyIdentifier = {
                objectName: "objectName",
                propertyName: "propertyName"
            };

        let colorHelper: ColorHelper = new ColorHelper(
            this.colorPalette,
            fillProp,
            defaultDataPointColor);

        let color = colorHelper.getColorForMeasure(objects, ""); // returns a color
    }
}

Statik `normalizeSelector`

Bu yöntem normalleştirilmiş seçiciyi döndürür.

static normalizeSelector(selector: Selector, isSingleSeries?: boolean): Selector;

static normalizeSelector örneği

import ISelectionId = powerbi.visuals.ISelectionId;
import { ColorHelper } from "powerbi-visuals-utils-colorutils";

let selectionId: ISelectionId = ...;
let selector = ColorHelper.normalizeSelector(selectionId.getSelector(), false);

Hem yöntemler getThemeColor hem getHighContrastColor de renk teması renkleri ile ilgilidir. ColorHelper özelliğine isHighContrast sahiptir.

`getThemeColor`

Bu yöntem tema rengini döndürür.

 getThemeColor(themeColorName?: ThemeColorName): string;

`getHighContrastColor`

Bu yöntem, yüksek karşıtlık modunun rengini döndürür.

getHighContrastColor(themeColorName?: ThemeColorName, defaultColor?: string): string;

Yüksek karşıtlık modu örneği


import { ColorHelper } from "powerbi-visuals-utils-colorutils";

export class MyVisual implements IVisual {
        private colorHelper: ColorHelper;

        private init(options: VisualConstructorOptions): void {
            this.colors = options.host.colorPalette;
            this.colorHelper = new ColorHelper(this.colors);
        } 

            private createViewport(element: HTMLElement): void {
                const fontColor: string = "#131aea";
                const axisBackgroundColor: string = this.colorHelper.getThemeColor();
                
                // some d3 code before
                d3ElementName.attr("fill", colorHelper.getHighContrastColor("foreground", fontColor);
            }
                
            public static parseSettings(dataView: DataView, colorHelper: ColorHelper): VisualSettings {
                // some code that should be applied on formatting settings
                if (colorHelper.isHighContrast) {
                        this.settings.fontColor = colorHelper.getHighContrastColor("foreground", this.settings.fontColor);
                    }
            }
}

`ColorUtils`

Modül aşağıdaki işlevleri sağlar:

hexToRGBString
Döndür
parseColorString
calculateHighlightColor
createLinearColorScale
shadeColor
rgbBlend
channelBlend
hexBlend

hexToRGBString

Onaltılık rengi RGB dizesine dönüştürür.

function hexToRGBString(hex: string, transparency?: number): string

hexToRGBString örneği

import  { hexToRGBString } from "powerbi-visuals-utils-colorutils";

hexToRGBString('#112233');

// returns: "rgb(17,34,51)"

Döndür

RGB rengini döndürür.

function rotate(rgbString: string, rotateFactor: number): string

döndürme örneği

import { rotate } from "powerbi-visuals-utils-colorutils";

rotate("#CC0000", 0.25); // returns: #66CC00

parseColorString

Herhangi bir renk dizesini RGB biçimine ayrıştırıyor.

function parseColorString(color: string): RgbColor

parseColorString örneği

import { parseColorString } from "powerbi-visuals-utils-colorutils";

parseColorString('#09f');
// returns: {R: 0, G: 153, B: 255 }

parseColorString('rgba(1, 2, 3, 1.0)');
// returns: {R: 1, G: 2, B: 3, A: 1.0 }

calculateHighlightColor

lumianceThreshold ve delta değerine göre rgbColor'dan vurgu rengini hesaplar.

function calculateHighlightColor(rgbColor: RgbColor, lumianceThreshold: number, delta: number): string

calculateHighlightColor örneği

import { calculateHighlightColor } from "powerbi-visuals-utils-colorutils";

let yellow = "#FFFF00",
    yellowRGB = parseColorString(yellow);

calculateHighlightColor(yellowRGB, 0.8, 0.2);

// returns: '#CCCC00'

createLinearColorScale

Belirli bir sayı etki alanı için doğrusal renk ölçeği döndürür.

function createLinearColorScale(domain: number[], range: string[], clamp: boolean): LinearColorScale

createLinearColorScale örneği

import { createLinearColorScale } from "powerbi-visuals-utils-colorutils";

let scale = ColorUtility.createLinearColorScale(
    [0, 1, 2, 3, 4],
    ["red", "green", "blue", "black", "yellow"],
    true);

scale(1); // returns: green
scale(10); // returns: yellow

shadeColor

Dize onaltılık ifadesini sayıya dönüştürür ve yüzde ile R, G, B kanallarını hesaplar. Her kanal için yüzdeyi uygular ve onaltılık değeri bir dize olarak pound işaretiyle döndürür.

function shadeColor(color: string, percent: number): string

shadeColor örneği

import { shadeColor } from "powerbi-visuals-utils-colorutils";

shadeColor('#000000', 0.1); // returns '#1a1a1a'
shadeColor('#FFFFFF', -0.5); // returns '#808080'
shadeColor('#00B8AA', -0.25); // returns '#008a80'
shadeColor('#00B8AA', 0); // returns '#00b8aa'

rgbBlend

Arka plan rengi üzerinde opaklık içeren bir rengi katmanlar. Herhangi bir alfa kanalı yoksayılır.

function rgbBlend(foreColor: RgbColor, opacity: number, backColor: RgbColor): RgbColor

rgbBlend örneği

import { rgbBlend} from "powerbi-visuals-utils-colorutils";

rgbBlend({R: 100, G: 100, B: 100}, 0.5, {R: 200, G: 200, B: 200});

// returns: {R: 150, G: 150, B: 150}

channelBlend

İki renk için tek bir kanalı harmanlar.

function channelBlend(foreChannel: number, opacity: number, backChannel: number): number

channelBlend örneği

import { channelBlend} from "powerbi-visuals-utils-colorutils";

channelBlend(0, 1, 255); // returns: 0
channelBlend(128, 1, 255); // returns: 128
channelBlend(255, 0, 0); // returns: 0
channelBlend(88, 0, 88); // returns: 88

hexBlend

Arka plan rengi üzerinde opaklık içeren bir rengi katmanlar.

function hexBlend(foreColor: string, opacity: number, backColor: string): string

hexBlend örneği

import { hexBlend} from "powerbi-visuals-utils-colorutils";

let yellow = "#FFFF00",
    black = "#000000",
    white = "#FFFFFF";

hexBlend(yellow, 0.5, white); // returns: "#FFFF80"
hexBlend(white, 0.5, yellow); // returns: "#FFFF80"

hexBlend(yellow, 0.5, black); // returns: "#808000"
hexBlend(black, 0.5, yellow); // returns: "#808000"

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-12-15