Stöd för högkontrastläge i visuella Power BI-objekt

Inställningen Högkontrast i Windows gör text och grafik enklare att se genom att visa mer distinkta färger. I den här artikeln beskrivs hur du lägger till stöd för högkontrastläge i visuella Power BI-objekt. Mer information finns i Stöd för högkontrast i Power BI.

Om du vill visa en implementering av stöd för högkontrast går du till den visuella lagringsplatsen PowerBI-visuals-sampleBarChart.

Om du vill visa ett visuellt objekt i högkontrastläge måste du:

• Identifiera högkontrastläge och färger vid initiering.
• Rita det visuella objektet korrekt vid implementeringen.

Initiering

ColorPalette-medlemmen i options.host har flera egenskaper för högkontrastläge. Använd dessa egenskaper för att avgöra om högkontrastläget är aktivt och, om det är det, vilka färger som ska användas.

• Identifiera att Power BI är i högkontrastläge

  Om host.colorPalette.isHighContrast är trueär högkontrastläget aktivt och det visuella objektet bör rita sig därefter.

• Hämta högkontrastfärger

  När det visas i högkontrastläge bör ditt visuella objekt begränsa sig till följande inställningar:

  • Förgrundsfärg används för att rita linjer, ikoner, text och kontur eller fyllning av former.

  • Bakgrundsfärg används för bakgrund och som fyllningsfärg för konturerade former.

  • Förgrundsmarkerad färg används för att ange ett markerat eller aktivt element.

  • Hyperlänkfärg används endast för hyperlänktext.

    Kommentar

    Om en sekundär färg behövs kan förgrundsfärgen användas med viss opacitet (inbyggda visuella Power BI-objekt använder 40 % opacitet). Använd detta sparsamt för att hålla den visuella informationen lätt att se.

Under initieringen kan du lagra följande värden i din constructor metod:

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 också lagra host objektet under initieringen och komma åt relevanta colorPalette egenskaper under en uppdatering.

Implementering

De specifika implementeringarna av stöd för högkontrast varierar från visuellt objekt till visuellt objekt och beror på detaljerna i den grafiska designen. För att viktig information ska vara enkel att urskilja med begränsade färger kräver högkontrastläget vanligtvis en design som skiljer sig något från standardläget.

Inbyggda visuella Power BI-objekt följer dessa riktlinjer:

• Alla datapunkter använder samma färg (förgrund).
• All text, axlar, pilar och linjer använder förgrundsfärgen.
• Tjocka former ritas som konturer med tjocka linjer (minst två bildpunkter) och bakgrundsfärgfyllning.
• När datapunkter är relevanta särskiljs de av olika markörformer och datalinjer särskiljs av olika streck.
• När ett dataelement är markerat ändrar alla andra element sin opacitet till 40 %.
• För utsnitt och aktiva filterelement använder du den förgrundsvalda färgen.

Följande exempelstapeldiagram ritas med två bildpunkter med tjock förgrundsdisposition och bakgrundsfyllning. Jämför hur det ser ut med standardfärger och med följande högkontrasteman:

Standardfärger

Tema för mörk färg med högkontrast

Tema för vit färg med högkontrast

Exempel

Följande kod visar en plats i visualTransform funktionen som har ändrats för att stödja högkontrast. Den anropas som en del av renderingen under uppdateringen. Fullständig implementering av den här koden barChart.ts finns i filen i den visuella lagringsplatsen PowerBI-visuals-sampleBarChart.

Inget stöd för högkontrast

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öd för högkontrast

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

Relaterat innehåll

Utforma Power BI-rapporter för hjälpmedel