Podpora režimu vysokého kontrastu ve vizuálech Power BIHigh-contrast mode support in Power BI visuals

Nastavení vysokého kontrastu ve Windows usnadňuje rozlišení textu a aplikací pomocí zřetelnějších barev.The Windows high contrast setting makes text and apps easier to see by displaying more distinct colors. Tento článek vysvětluje, jak do vizuálů Power BI přidat podporu režimu vysokého kontrastu.This article discusses how to add high-contrast mode support to Power BI visuals. Další informace najdete v tématu o podpoře vysokého kontrastu v Power BI.For more information, see high-contrast support in Power BI.

Implementaci podpory vysokého kontrastu můžete vidět v úložišti vizuálu PowerBI-visuals-sampleBarChart.To view an implementation of high-contrast support, go to the PowerBI-visuals-sampleBarChart visual repository.

Při inicializaciOn initialization

Člen colorPalette objektu options.host má několik vlastností pro režim vysokého kontrastu.The colorPalette member of options.host has several properties for high-contrast mode. Pomocí těchto vlastností určete, jestli je režim vysokého kontrastu aktivní, a pokud ano, jaké barvy se mají použít.Use these properties to determine whether high-contrast mode is active and, if it is, what colors to use.

Zjištění, zda je Power Bi v režimu vysokého kontrastuDetect that Power BI is in high-contrast mode

Pokud má host.colorPalette.isHighContrast hodnotu true, režim vysokého kontrastu je aktivní a vizuál by se měl odpovídajícím způsobem vykreslit.If host.colorPalette.isHighContrast is true, high-contrast mode is active and the visual should draw itself accordingly.

Získání barev vysokého kontrastuGet high-contrast colors

V režimu vysokého kontrastu by se měl vizuál omezit na následující nastavení:In high-contrast mode, your visual should limit itself to the following settings:

  • Barva popředí slouží ke kreslení čar, ikon, textu a obrysům nebo výplně tvarů.Foreground color is used to draw any lines, icons, text, and outline or fill of shapes.
  • Barva pozadí slouží pro pozadí a jako barva výplně tvarů s obrysem.Background color is used for background, and as the fill color of outlined shapes.
  • Barva popředí pro vybrané položky slouží k označení vybraného nebo aktivního prvku.Foreground - selected color is used to indicate a selected or active element.
  • Barva hypertextového odkazu slouží pouze pro text hypertextového odkazu.Hyperlink color is used only for hyperlink text.

Poznámka

Pokud potřebujete sekundární barvu, můžete použít barvu popředí s určitou neprůhledností (nativní vizuály Power BI používají 40% neprůhlednost).If a secondary color is needed, foreground color may be used with some opacity (Power BI native visuals use 40% opacity). Tento postup používejte obezřetně, abyste zachovali snadnou viditelnost podrobností vizuálu.Use this sparingly to keep the visual details easy to see.

Při inicializaci můžete uložit tyto hodnoty:During initialization, you can store the following values:

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

Nebo můžete při inicializaci uložit objekt host a při aktualizaci přistupovat k relevantním vlastnostem colorPalette.Or you can store the host object during initialization and access the relevant colorPalette properties during update.

Při aktualizaciOn update

Konkrétní implementace podpory vysokého kontrastu se u různých vizuálů liší a závisí na podrobnostech grafického návrhu.The specific implementations of high-contrast support vary from visual to visual and depend on the details of the graphic design. Aby byly důležité podrobnosti snadno rozeznatelné i s omezenými barvami, vyžaduje režim vysokého kontrastu obvykle návrh, který se mírně liší od výchozího režimu.To keep important details easy to distinguish with the limited colors, high-contrast mode ordinarily requires a design that's slightly different from the default mode.

Nativní vizuály Power BI dodržují tyto pokyny:Power BI native visuals follow these guidelines:

  • Všechny datové body používají stejnou barvu (barvu popředí).All data points use the same color (foreground).
  • Veškerý text, osy, šipky, čáry atd. používají barvu popředí.All text, axes, arrows, lines, and so on use the foreground color.
  • Silné tvary jsou nakresleny jako obrysy pomocí silných tahů (minimálně dva pixely) a výplní v barvě pozadí.Thick shapes are drawn as outlines, with thick strokes (at least two pixels) and background color fill.
  • V případě potřeby se datové body rozlišují pomocí různých tvarů zvýrazňovače a datové čáry pomocí různých čárkovaných čar.When data points are relevant, they're distinguished by different marker shapes, and data lines are distinguished by different dashing.
  • Při zvýraznění datového prvku se u všech ostatní prvků změní neprůhlednost na 40 %.When a data element is highlighted, all other elements change their opacity to 40%.
  • U průřezů prvky aktivního filtru používají barvu popředí pro vybrané položky.For slicers, active filter elements use foreground-selected color.

V následujícím ukázkovém pruhovém grafu jsou například všechny pruhy nakresleny obrysem silným dva pixely v barvě popředí a výplní v barvě pozadí.In the following sample bar chart, for example, all bars are drawn with two pixels of thick foreground outline and background fill. Porovnejte jeho vzhled s výchozími barvami a několika motivy vysokého kontrastu:Compare the way it looks with default colors and with a couple of high-contrast themes:

Ukázkový pruhový graf používající standardní barvy Ukázkový pruhový graf používající tmavý barevný motiv č. 2 Ukázkový pruhový graf používající bílý barevný motivSample Bar Chart using standard colors Sample Bar Chart using Dark #2 color theme Sample Bar Chart using White color theme

Další část ukazuje jedno místo ve funkci visualTransform, která byla změněna tak, aby podporovala vysoký kontrast.The next section shows one place in the visualTransform function that was changed to support high contrast. Volá se při vykreslování během aktualizace.It's called as part of rendering during the update.

PředBefore

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

PoAfter

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