Dukungan mode kontras tinggi dalam visual Power BI

Pengaturan kontras tinggi Windows membuat teks dan grafik lebih mudah dilihat dengan menampilkan warna yang lebih berbeda. Artikel ini mendiskusikan cara menambahkan dukungan mode kontras tinggi ke visual Power BI. Untuk informasi selengkapnya, lihat Dukungan kontras tinggi di Power BI.

Untuk melihat implementasi dukungan kontras tinggi, buka repositori visual PowerBI-visuals-sampleBarChart.

Untuk menampilkan visual dalam mode kontras tinggi, Anda harus:

• Deteksi mode dan warna kontras tinggi pada inisialisasi.
• Gambarkan visual dengan benar pada implementasi.

Inisialisasi

Anggota colorPalette dari options.host memiliki beberapa properti untuk mode kontras tinggi. Gunakan properti ini untuk menentukan apakah mode kontras tinggi aktif dan, jika ya, warna apa yang digunakan.

• Mendeteksi bahwa Power BI dalam mode kontras tinggi

  Jika host.colorPalette.isHighContrast adalah true, mode kontras tinggi aktif, dan visual harus menggambar dirinya sendiri sesuai.

• Mendapatkan warna kontras tinggi

  Saat menampilkan dalam mode kontras tinggi, visual Anda harus membatasi dirinya pada pengaturan berikut:

  • Warna latar depan digunakan untuk menggambar garis, ikon, teks, dan garis besar atau isian bentuk apa pun.

  • Warna latar belakang digunakan untuk latar belakang, dan sebagai warna isian dari bentuk yang diuraikan.

  • Warna yang dipilih latar depan digunakan untuk menunjukkan elemen yang dipilih atau aktif.

  • Warna hyperlink hanya digunakan untuk teks hyperlink.

    Catatan

    Jika warna sekunder diperlukan, warna latar depan dapat digunakan dengan beberapa opasitas (visual asli Power BI menggunakan opasitas 40%). Gunakan ini dengan hemat agar detail visual mudah dilihat.

Selama inisialisasi, Anda dapat menyimpan nilai berikut dalam metode constructor Anda:

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

Atau, Anda dapat menyimpan host objek selama inisialisasi dan mengakses properti yang relevan colorPalette selama pembaruan.

implementasi

Implementasi spesifik dari dukungan kontras tinggi bervariasi dari visual ke visual dan bergantung pada detail desain grafis. Agar detail penting mudah dibedakan dengan warna terbatas, mode kontras tinggi biasanya memerlukan desain yang sedikit berbeda dari mode default.

Visual asli Power BI mengikuti panduan berikut:

• Semua titik data menggunakan warna yang sama (latar depan).
• Semua teks, sumbu, panah, dan garis menggunakan warna latar depan.
• Bentuk tebal digambar sebagai kerangka dengan goresan tebal (setidaknya dua piksel) dan isi warna latar belakang.
• Saat titik data relevan, titik tersebut dibedakan dengan bentuk penanda yang berbeda, dan garis data dibedakan dengan tanda hubung yang berbeda.
• Saat elemen data disorot, semua elemen lainnya mengubah opasitas menjadi 40%.
• Untuk pemotong dan elemen filter aktif, gunakan warna latar depan yang dipilih.

Contoh bagan batang berikut digambar dengan dua piksel kerangka latar depan tebal dan isi latar belakang. Bandingkan tampilannya dengan warna default dan dengan tema kontras tinggi berikut:

Warna standar

Tema warna gelap kontras tinggi

Tema warna putih kontras tinggi

Contoh

Kode berikut menunjukkan satu tempat dalam fungsi visualTransform yang diubah untuk mendukung kontras tinggi. Ini disebut sebagai bagian dari rendering selama pembaruan. Untuk implementasi lengkap kode ini, lihat barChart.ts file di repositori visual PowerBI-visuals-sampleBarChart.

Tidak ada dukungan kontras tinggi

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

Dukungan kontras tinggi

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

Konten terkait

Mendesain laporan Power BI untuk aksesibilitas