Поддержка режима высокой контрастности в визуальных элементах Power BI

Параметр высокой контрастности Windows упрощает просмотр текста и графики, отображая более разные цвета. В этой статье описывается, как добавить поддержку режима высокой контрастности в визуальные элементы Power BI. Дополнительные сведения см. в статье о поддержке высокой контрастности в Power BI.

Чтобы просмотреть реализацию поддержки высокой контрастности, перейдите в репозиторий визуальных элементов PowerBI-visuals-sampleBarChart.

Чтобы отобразить визуальный элемент в режиме высокой контрастности, необходимо:

• Обнаружение режима высокой контрастности и цветов при инициализации.
• Правильно нарисуйте визуальный элемент при реализации.

Инициализация

Элемент colorPaletteoptions.host имеет несколько свойств для режима высокой контрастности. Используйте эти свойства, чтобы определить, активен ли режим высокой контрастности и, если он есть, какие цвета следует использовать.

• Обнаружение того, что Power BI находится в режиме высокой контрастности

  Если host.colorPalette.isHighContrast это true, режим высокой контрастности активен, и визуальный элемент должен рисовать себя соответствующим образом.

• Получение цветов высокой контрастности

  При отображении в режиме высокой контрастности визуальный элемент должен ограничиться следующими параметрами:

  • Цвет переднего плана используется для рисования любых линий, значков, текста и контура или заливки фигур.

  • Цвет фона используется для фона и в качестве цвета заливки контурных фигур.

  • Цвет переднего плана используется для указания выбранного или активного элемента.

  • Цвет гиперссылки используется только для текста гиперссылки .

    Примечание.

    Если требуется дополнительный цвет, цвет переднего плана можно использовать с некоторой прозрачностью (собственные визуальные элементы Power BI используют 40 % непрозрачности). Используйте это смешно, чтобы упростить просмотр визуальных сведений.

Во время инициализации в методе можно хранить следующие значения constructor :

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

Кроме того, можно сохранить host объект во время инициализации и получить доступ к соответствующим colorPalette свойствам во время обновления.

Внедрение

Конкретные реализации поддержки высокой контрастности зависят от визуального элемента до визуального элемента и зависят от деталей графического дизайна. Чтобы упростить различие важных деталей с ограниченными цветами, обычно режим высокой контрастности требует дизайна, который немного отличается от режима по умолчанию.

Собственные визуальные элементы Power BI следуют этим рекомендациям:

• Все точки данных используют один и тот же цвет (передний план).
• Все тексты, оси, стрелки и строки используют цвет переднего плана.
• Толстые фигуры рисуются как контуры с толстыми штрихами (по крайней мере два пикселя) и заливкой цвета фона.
• Если точки данных релевантны, они отличаются различными фигурами маркеров, а линии данных различаются тире.
• При выделении элемента данных все остальные элементы изменяют их непрозрачность на 40 %.
• Для срезов и активных элементов фильтра используйте выделенный на переднем плане цвет.

В следующем примере линейчатой диаграммы рисуется два пикселя с толстым контуром переднего плана и заливкой фона. Сравните способ его оформления с цветами по умолчанию и следующими темами высокой контрастности:

Стандартные цвета

Тема темного цвета высокой контрастности

Тема белого цвета высокой контрастности

Пример

В следующем коде показано одно место в visualTransform функции, которая была изменена для поддержки высокой контрастности. Он вызывается как часть отрисовки во время обновления. Полный пример реализации этого кода см barChart.ts . в файле в визуальном репозитории PowerBI-visuals-sampleBarChart.

Поддержка высокой контрастности не поддерживается

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

Поддержка высокой контрастности

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

Связанный контент

Проектирование отчетов Power BI для специальных возможностей