Støtte for høykontrastmodus i Power BI-visualobjekter

Høykontrastinnstillingen i Windows gjør det enklere å se tekst og grafikk ved å vise mer distinkte farger. Denne artikkelen beskriver hvordan du legger til støtte for høykontrastmodus i Power BI-visualobjekter. Hvis du vil ha mer informasjon, kan du se Støtte for høykontrast i Power BI.

Hvis du vil vise en implementering av støtte for høykontrast, går du til visualobjektrepositoriet powerBI-visualobjekter og visualobjekter i PowerBI.

Hvis du vil vise et visualobjekt i høykontrastmodus, må du:

• Finn høykontrastmodus og farger ved initialisering.
• Tegn visualobjektet på riktig måte ved implementering.

Initialisering

ColorPalette-medlemmet options.host har flere egenskaper for høykontrastmodus. Bruk disse egenskapene til å avgjøre om høykontrastmodus er aktiv og, hvis den er, hvilke farger som skal brukes.

• Finn ut at Power BI er i høykontrastmodus

  Hvis host.colorPalette.isHighContrast det er true, er høykontrastmodus aktiv, og visualobjektet bør tegne seg selv tilsvarende.

• Få farger med høy kontrast

  Når du viser i høykontrastmodus, bør visualobjektet begrense seg til følgende innstillinger:

  • Forgrunnsfarge brukes til å tegne linjer, ikoner, tekst og disposisjon eller fyll på figurer.

  • Bakgrunnsfarge brukes for bakgrunn, og som fyllfarge for disposisjonsfigurer.

  • Forgrunnsvalgt farge brukes til å angi et valgt eller aktivt element.

  • Hyperkoblingsfarge brukes bare for hyperkoblingstekst.

    Merk

    Hvis en sekundær farge er nødvendig, kan forgrunnsfargen brukes med en viss tetthet (opprinnelige visualobjekter i Power BI bruker 40 % tetthet). Bruk dette på en enkel måte for å gjøre visualobjektdetaljene enkle å se.

Under initialiseringen kan du lagre følgende verdier i constructor metoden:

private isHighContrast: boolean;

private foregroundColor: string;
private backgroundColor: string;
private foregroundSelectedColor: string;
private hyperlinkColor: string;
//...

constructor(options: VisualConstructorOptions) {
    this.host = options.host;
    let colorPalette: ISandboxExtendedColorPalette = host.colorPalette;
    //...
    this.isHighContrast = colorPalette.isHighContrast;
    if (this.isHighContrast) {
        this.foregroundColor = colorPalette.foreground.value;
        this.backgroundColor = colorPalette.background.value;
        this.foregroundSelectedColor = colorPalette.foregroundSelected.value;
        this.hyperlinkColor = colorPalette.hyperlink.value;
    }

Du kan også lagre host objektet under initialisering og få tilgang til de relevante egenskapene colorPalette under en oppdatering.

Implementering

De spesifikke implementeringene av støtte for høykontrast varierer fra visualobjekt til visualobjekt og avhenger av detaljene i grafikkutformingen. Hvis du vil holde viktige detaljer enkle å skille mellom med begrensede farger, krever høykontrastmodus vanligvis en utforming som er litt forskjellig fra standardmodusen.

Power BI-visualobjekter følger disse retningslinjene:

• Alle datapunkter bruker samme farge (forgrunn).
• All tekst, akser, piler og linjer bruker forgrunnsfargen.
• Tykke figurer tegnes som konturer med tykke strøk (minst to piksler) og bakgrunnsfargefyll.
• Når datapunkter er relevante, skilles de av forskjellige indikatorfigurer, og datalinjer skilles fra ulike streker.
• Når et dataelement er uthevet, endrer alle andre elementer tettheten til 40 %.
• Bruk den forgrunnsvalgte fargen for slicere og aktive filterelementer.

Det følgende eksempelstolpediagrammet tegnes med to piksler tykk forgrunnsomriss og bakgrunnsfyll. Sammenlign hvordan det ser ut med standardfarger og med følgende høykontrasttemaer:

Standardfarger

Mørk fargetema med høy kontrast

Hvit fargetema med høy kontrast

Eksempel

Følgende kode viser ett sted i visualTransform funksjonen som ble endret for å støtte høykontrast. Det kalles som en del av gjengivelsen under oppdateringen. Hvis du vil ha full implementering av denne koden, kan du se barChart.ts filen i powerbi-visualobjekter-sampleBarChart-visualobjektrepositoriet.

Ingen støtte for høykontrast

for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
    let defaultColor: Fill = {
        solid: {
            color: colorPalette.getColor(category.values[i] + '').value
        }
    };

    barChartDataPoints.push({
        category: category.values[i] + '',
        value: dataValue.values[i],
        color: getCategoricalObjectValue<Fill>(category, i, 'colorSelector', 'fill', defaultColor).solid.color,
        selectionId: host.createSelectionIdBuilder()
            .withCategory(category, i)
            .createSelectionId()
    });
}

Støtte for høykontrast

for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
    const color: string = getColumnColorByIndex(category, i, colorPalette);

    const selectionId: ISelectionId = host.createSelectionIdBuilder()
        .withCategory(category, i)
        .createSelectionId();

    barChartDataPoints.push({
        color,
        strokeColor,
        strokeWidth,
        selectionId,
        value: dataValue.values[i],
        category: `${category.values[i]}`,
    });
}

//...

function getColumnColorByIndex(
    category: DataViewCategoryColumn,
    index: number,
    colorPalette: ISandboxExtendedColorPalette,
): string {
    if (colorPalette.isHighContrast) {
        return colorPalette.background.value;
    }

    const defaultColor: Fill = {
        solid: {
            color: colorPalette.getColor(`${category.values[index]}`).value,
        }
    };

    return getCategoricalObjectValue<Fill>(category, index, 'colorSelector', 'fill', defaultColor).solid.color;
}

Relatert innhold

Utforme Power BI-rapporter for tilgjengelighet