Kleurhulpmiddelen

Dit artikel helpt u bij het installeren, importeren en gebruiken van kleurhulpmiddelen. Informatie over het gebruik van kleurhulpmiddelen om thema's en paletten toe te passen op de gegevenspunten van een Power BI-visual.

Vereisten

Als u het pakket wilt gebruiken, installeert u:

  • node.js (we raden de nieuwste LTS-versie aan)
  • npm (de minimaal ondersteunde versie is 3.0.0)
  • De aangepaste visual die is gemaakt door PowerBI-visuals-tools

Installatie

Als u het pakket wilt installeren, moet u de volgende opdracht uitvoeren in de map met uw huidige visual:

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

Met deze opdracht wordt het pakket geïnstalleerd en wordt een pakket als een afhankelijkheid aan uw package.json bestand toegevoegd.

Gebruik

Als u hulpprogramma's voor interactiviteit wilt gebruiken, moet u het vereiste onderdeel importeren in de broncode van de visual.

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

Meer informatie over het installeren en gebruiken van de colorUtils in uw Power BI-visuals:

  • [Gebruikshandleiding] In de gebruikshandleiding wordt een openbare API van het pakket beschreven. Het bevat een beschrijving en voorbeelden voor elke openbare interface.

Dit pakket bevat de volgende klassen en modules:

  • ColorHelper : helpt bij het genereren van verschillende kleuren voor de grafiekwaarden
  • colorUtils - helpt bij het converteren van kleurindelingen

ColorHelper

De ColorHelper klasse biedt de volgende functies en methoden:

getColorForSeriesValue

Met deze methode wordt de kleur voor een specifieke reekswaarde opgehaald. Als er geen expliciete kleur of standaardkleur is ingesteld, wordt de kleur toegewezen vanuit de kleurenschaal voor deze reeks.

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

voorbeeld getColorForSeriesValue

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

Met deze methode wordt de kleur voor een specifieke meting ophaalt.

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

Voorbeeld van kleur ophalen voor meting

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

Statische normalizeSelector

Met deze methode wordt de genormaliseerde selector geretourneerd.

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

voorbeeld van static normalizeSelector

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

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

Methoden getThemeColor en getHighContrastColor zijn beide gerelateerd aan kleurenthemakleuren. ColorHelper heeft de isHighContrast eigenschap.

getThemeColor

Met deze methode wordt de themakleur geretourneerd.

 getThemeColor(themeColorName?: ThemeColorName): string;

getHighContrastColor

Deze methode retourneert de kleur voor de modus hoog contrast.

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

Voorbeeld van modus Hoog contrast


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

De module biedt de volgende functies:

hexToRGBString

Converteert een hexkleur naar een RGB-tekenreeks.

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

hexToRGBString-voorbeeld

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

hexToRGBString('#112233');

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

Draaien

Hiermee wordt DE RGB-kleur gedraaid.

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

voorbeeld draaien

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

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

parseColorString

Parseert een kleurtekenreeks in RGB-indeling.

function parseColorString(color: string): RgbColor

voorbeeld parseColorString

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

Berekent de markeringskleur van de rgbColor op basis van de lumiaanceThreshold en delta.

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

calculateHighlightColor-voorbeeld

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

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

calculateHighlightColor(yellowRGB, 0.8, 0.2);

// returns: '#CCCC00'

createLinearColorScale

Retourneert een lineaire kleurenschaal voor een specifiek domein met getallen.

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

createLinearColorScale-voorbeeld

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

Converteert een hex-tekenreeksexpressie naar een getal en berekent het percentage en de R-, G-, B-kanalen. Hiermee wordt het percentage voor elk kanaal toegepast en wordt de hexwaarde geretourneerd als een tekenreeks met een hekje.

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

shadeColor-voorbeeld

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

Overlays van een kleur met ondoorzichtigheid boven een achtergrondkleur. Elk alfakanaal wordt genegeerd.

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

rgbBlend-voorbeeld

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

Combineert één kanaal voor twee kleuren.

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

channelBlend-voorbeeld

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

Overlays van een kleur met ondoorzichtigheid boven een achtergrondkleur.

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

hexBlend-voorbeeld

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