Podpora režimu vysokého kontrastu vo vizuáloch Power BI

Nastavenie Windowsu pre vysoký kontrast zjednodušuje zobrazovanie textu a grafiky zobrazením výraznejších farieb. Tento článok obsahuje informácie o tom, ako pridať podporu režimu vysokého kontrastu pre vizuály Power BI. Ďalšie informácie nájdete v téme Podpora vysokého kontrastu v službe Power BI.

Ak chcete zobraziť implementáciu podpory vysokého kontrastu, prejdite do odkladacieho priestoru vizuálov PowerBI-visuals-sampleBarChart.

Ak chcete zobraziť vizuál v režime vysokého kontrastu, musíte:

• Rozpoznanie režimu vysokého kontrastu a farieb pri inicializácii.
• Správne nakreslite vizuál v implementácii.

Inicializácia

Člen colorPalette , ktorý obsahuje options.host niekoľko vlastností pre režim vysokého kontrastu. Pomocou týchto vlastností zistite, či je režim vysokého kontrastu aktívny, a ak je, aké farby použiť.

• Zistenie, či je Power BI v režime vysokého kontrastu

  Ak host.colorPalette.isHighContrast má hodnotu true, režim vysokého kontrastu je aktívny a vizuál by sa podľa toho mal vykresliť.

• Získanie farieb vysokého kontrastu

  Pri zobrazení v režime vysokého kontrastu by sa mal váš vizuál obmedziť na nasledujúce nastavenia:

  • Farba popredia , ktorá sa používa na vykresliť všetky čiary, ikony, text a obrys alebo výplň tvarov.

  • Farba pozadia , ktorá sa používa pre pozadie a ako farba výplne tvarov s obrysmi.

  • Farba vybratá v popredí, ktorá sa používa na označenie vybratého alebo aktívneho prvku.

  • Farba hypertextového prepojenia , ktorá sa používa iba pre text hypertextového prepojenia.

    Poznámka

    Ak je potrebná sekundárna farba, farba popredia sa dá použiť s určitou nepriehľadnosťou (natívne vizuály služby Power BI používajú 40-percentnú nepriehľadnosť). Používajte to však zriedkavo, aby boli podrobnosti vizuálov jednoducho vidieť.

Počas inicializácie môžete do constructor metódy uložiť nasledujúce hodnoty:

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

Takisto môžete uložiť host objekt počas inicializácie a získať prístup k relevantným colorPalette vlastnostiam počas aktualizácie.

Implementácia

Špecifické implementácie podpory vysokého kontrastu sa líšia od vizuálu k vizuálu a závisia od podrobností grafického dizajnu. Na jednoduché rozlíšenie dôležitých podrobností pomocou obmedzených farieb zvyčajne režim vysokého kontrastu vyžaduje návrh, ktorý sa trochu líši od predvoleného režimu.

Natívne vizuály služby Power BI nasledujú tieto pokyny:

• Všetky údajové body používajú rovnakú farbu (popredie).
• Všetok text, všetky osi, šípky a čiary používajú farbu popredia.
• Hrubé tvary sú vykreslené ako obrysy s hrubými ťahmi (minimálne s hrúbkou 2 pixlov) a výplňou farby pozadia.
• Ak sú údajové body relevantné, odlišujú sa rozličnými značkami vo forme tvarov a čiary údajov sa odlišujú rozličným prerušovaním čiar,
• Keď je prvok údajov zvýraznený, všetky ostatné prvky zmenia svoju nepriehľadnosť na 40%..
• V prípade rýchlych filtrov a aktívnych prvkov filtra použite farbu vybratú v popredí.

Nasledujúci ukážkový pruhový graf je vykreslený s obrysom popredia hrúbky 2 pixelov a výplňou pozadia. Porovnajte si, ako to vyzerá s predvolenými farbami a ako s nasledujúcimi motívmi s vysokým kontrastom:

Štandardné farby

Motív tmavej farby s vysokým kontrastom

Motív bielej farby s vysokým kontrastom

Príklad

Nasledujúci kód zobrazuje jedno miesto vo funkcii visualTransform , ktoré bolo zmenené, aby podporovalo vysoký kontrast. Počas aktualizácie sa nazýva ako súčasť vykresľovania. Úplnú implementáciu tohto kódu nájdete barChart.ts v súbore v odkladacom priestore vizuálov PowerBI-visuals-sampleBarChart.

Žiadna podpora vysokého kontrastu

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

Podpora vysokého kontrastu

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

Súvisiaci obsah

Navrhovanie zostáv Služby Power BI so zjednodušením ovládania