Power BI görsellerinde yüksek karşıtlık modu desteği

Windows yüksek karşıtlık ayarı, daha farklı renkler görüntüleyerek metin ve grafiklerin daha kolay görülmesini sağlar. Bu makalede Power BI görsellerine yüksek karşıtlık modu desteğinin nasıl ekleneceği açıklanır. Daha fazla bilgi için bkz . Power BI'da yüksek karşıtlık desteği.

Yüksek karşıtlık desteğinin bir uygulamasını görüntülemek için PowerBI-visuals-sampleBarChart görsel deposuna gidin.

Bir görseli yüksek karşıtlık modunda görüntülemek için şunları yapmak gerekir:

• Başlatma sonrasında yüksek karşıtlık modunu ve renkleri algılayın.
• Uygulama üzerinde görseli doğru çizin.

Başlatma

colorPalette üyesi, options.host yüksek karşıtlık modu için çeşitli özelliklere sahiptir. Yüksek karşıtlık modunun etkin olup olmadığını ve etkinse hangi renklerin kullanılacağını belirlemek için bu özellikleri kullanın.

• Power BI'ın yüksek karşıtlık modunda olduğunu algılama

  ise host.colorPalette.isHighContrasttrue, yüksek karşıtlık modu etkindir ve görsel kendisini buna göre çizmelidir.

• Yüksek karşıtlıklı renkler alma

  Yüksek karşıtlık modunda görüntülenirken görseliniz kendisini aşağıdaki ayarlarla sınırlandırmalıdır:

  • Ön plan rengi, şekillerin çizgilerini, simgelerini, metinlerini ve ana hatlarını veya dolgularını çizmek için kullanılır.

  • Arka plan rengi arka plan için ve ana hatlı şekillerin dolgu rengi olarak kullanılır.

  • Ön planda seçilen renk, seçili veya etkin bir öğeyi göstermek için kullanılır.

  • Köprü rengi yalnızca köprü metni için kullanılır.

    Dekont

    İkincil bir renk gerekiyorsa, ön plan rengi bazı opaklıklarla kullanılabilir (Power BI yerel görselleri %40 opaklık kullanır). Görsel ayrıntıların kolayca görülmesini sağlamak için bunu tedbirli bir şekilde kullanın.

Başlatma sırasında yönteminizde constructor aşağıdaki değerleri depolayabilirsiniz:

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

Alternatif olarak, başlatma sırasında nesnesini depolayabilir host ve güncelleştirme sırasında ilgili colorPalette özelliklere erişebilirsiniz.

Uygulama

Yüksek karşıtlık desteğinin belirli uygulamaları görselden görsele farklılık gösterir ve grafik tasarımının ayrıntılarına bağlıdır. Önemli ayrıntıların sınırlı renklerle ayırt edilmesi kolay tutmak için, yüksek karşıtlık modu normalde varsayılan moddan biraz farklı bir tasarım gerektirir.

Power BI yerel görselleri şu yönergeleri izleyin:

• Tüm veri noktaları aynı rengi (ön plan) kullanır.
• Tüm metinler, eksenler, oklar ve çizgiler ön plan rengini kullanır.
• Kalın şekiller kalın vuruşlar (en az iki piksel) ve arka plan renk dolgusu ile ana hatlar olarak çizilir.
• Veri noktaları ilgili olduğunda, bunlar farklı işaretçi şekilleriyle ayırt edilir ve veri çizgileri farklı tireleme ile ayırt edilir.
• Bir veri öğesi vurgulandığında, diğer tüm öğeler opaklıklarını %40 olarak değiştirir.
• Dilimleyiciler ve etkin filtre öğeleri için ön plan tarafından seçilen rengi kullanın.

Aşağıdaki örnek çubuk grafik, iki piksel kalın ön plan ana hattı ve arka plan dolgusu ile çizilmiştir. Görünümünü varsayılan renklerle ve aşağıdaki yüksek karşıtlık temalarıyla karşılaştırın:

Standart renkler

Yüksek karşıtlıklı koyu renk teması

Yüksek karşıtlıklı beyaz renk teması

Örnek

Aşağıdaki kod, işlevinde visualTransform yüksek karşıtlığı destekleyecek şekilde değiştirilmiş tek bir yeri gösterir. Güncelleştirme sırasında işlemenin bir parçası olarak çağrılır. Bu kodun tam uygulaması için PowerBI-visuals-sampleBarChart görsel deposundaki dosyaya bakınbarChart.ts.

Yüksek karşıtlık desteği yok

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

Yüksek karşıtlık desteği

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

İlgili içerik

Erişilebilirlik için Power BI raporları tasarlama