การรองรับโหมดความคมชัดสูงในวิชวล Power BI

การตั้งค่าความคมชัดสูงของ Windows ทําให้ข้อความและกราฟิกมองเห็นได้ง่ายขึ้นโดยการแสดงสีที่แตกต่างกันมากขึ้น บทความนี้อธิบายถึงวิธีการเพิ่มการรองรับโหมดความคมชัดสูงไปยังวิชวล Power BI สําหรับข้อมูลเพิ่มเติม โปรดดูที่ การรองรับความคมชัดสูงใน Power BI

หากต้องการดูการใช้งานการรองรับความคมชัดสูง ให้ไปที่ พื้นที่เก็บข้อมูลวิชวล PowerBI-visuals-sampleBarChart

เมื่อต้องการแสดงวิชวลในโหมดความคมชัดสูง คุณต้อง:

• ตรวจจับโหมดความคมชัดสูงและสีเมื่อมีการเตรียมใช้งาน
• วาดภาพอย่างถูกต้องบนการใช้งาน

การเริ่มต้น

สมาชิก colorPalette ของ options.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 สําหรับการเข้าถึง