Barevné nástroje

Tento článek vám pomůže nainstalovat, importovat a používat nástroje pro barvy. Naučte se používat barevné nástroje k použití motivů a palet na datových bodech vizuálu Power BI.

Předpoklady

Pokud chcete balíček použít, nainstalujte:

  • node.js (doporučujeme nejnovější verzi LTS)
  • npm (minimální podporovaná verze je 3.0.0)
  • Vlastní vizuál vytvořený nástroji PowerBI-visuals-tools

Instalace

Pokud chcete balíček nainstalovat, měli byste v adresáři s aktuálním vizuálem spustit následující příkaz:

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

Tento příkaz nainstaluje balíček a přidá balíček jako závislost do souboru package.json .

Využití

Pokud chcete používat nástroje pro interaktivitu, musíte importovat požadovanou komponentu ve zdrojovém kódu vizuálu.

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

Naučte se instalovat a používat nástroje colorUtils ve vizuálech Power BI:

  • [Průvodce používáním] Průvodce používáním popisuje veřejné rozhraní API balíčku. Poskytuje popis a příklady pro každé veřejné rozhraní.

Tento balíček obsahuje následující třídy a moduly:

  • ColorHelper – pomáhá generovat různé barvy pro hodnoty grafu.
  • colorUtils – pomáhá převést formáty barev

ColorHelper

Třída ColorHelper poskytuje následující funkce a metody:

getColorForSeriesValue

Tato metoda získá barvu pro konkrétní hodnotu řady. Pokud nebyla nastavena žádná explicitní barva nebo výchozí barva, je barva přidělena ze škály barev pro tuto řadu.

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

getColorForSeriesValue – příklad

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

Tato metoda získá barvu pro konkrétní míru.

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

Získání barvy pro příklad míry

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
    }
}

Statické normalizeSelector

Tato metoda vrátí normalizovaný selektor.

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

Static normalizeSelector – příklad

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

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

Metody getThemeColor a getHighContrastColor obě souvisejí s barvami motivu barev. ColorHelperisHighContrast má vlastnost.

getThemeColor

Tato metoda vrátí barvu motivu.

 getThemeColor(themeColorName?: ThemeColorName): string;

getHighContrastColor

Tato metoda vrátí barvu pro režim vysokého kontrastu.

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

Příklad režimu vysokého kontrastu


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

Modul poskytuje následující funkce:

hexToRGBString

Převede šestnáctkovou barvu na řetězec RGB.

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

příklad hexToRGBString

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

hexToRGBString('#112233');

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

Otočit

Otočí barvu RGB.

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

otočit příklad

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

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

parseColorString

Parsuje libovolný barevný řetězec do formátu RGB.

function parseColorString(color: string): RgbColor

parseColorString – příklad

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

Vypočítá barvu zvýraznění z rgbColor na základě lumianceThreshold a delta.

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

calculateHighlightColor – příklad

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

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

calculateHighlightColor(yellowRGB, 0.8, 0.2);

// returns: '#CCCC00'

createLinearColorScale

Vrátí lineární barevnou škálu pro určitou doménu čísel.

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

createLinearColorScale – příklad

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

Převede šestnáctkový řetězcový výraz na číslo a vypočítá procento a R, G, B kanály. Použije procento pro každý kanál a vrátí šestnáctkovou hodnotu jako řetězec se znaménkem libry.

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

shadeColor – příklad

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

Překryje barvu neprůhledností na barvu pozadí. Jakýkoli alfakanál se ignoruje.

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

příklad rgbBlend

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

Promíchá jeden kanál pro dvě barvy.

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

Příklad channelBlend

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

Překryje barvu neprůhledností na barvu pozadí.

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

Příklad hexBlendu

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"
  • Last updated on