Power BI ビジュアルでのハイコントラスト モードのサポートHigh-contrast mode support in Power BI visuals

Windows の "ハイコントラスト" の設定を使用すると、よりはっきりした色で表示することで、テキストとアプリが見やすくなります。The Windows high contrast setting makes text and apps easier to see by displaying more distinct colors. この記事では、ハイコントラスト モードのサポートを Power BI ビジュアルに追加する方法について説明します。This article discusses how to add high-contrast mode support to Power BI visuals. 詳細については、Power BI でのハイコントラストのサポートに関するページを参照してください。For more information, see high-contrast support in Power BI.

ハイコントラストのサポートの実装を確認するには、PowerBI-visuals-sampleBarChart ビジュアル リポジトリを参照してください。To view an implementation of high-contrast support, go to the PowerBI-visuals-sampleBarChart visual repository.

初期化時On initialization

options.host の colorPalette メンバーには、ハイコントラスト モード用のいくつかのプロパティがあります。The colorPalette member of options.host has several properties for high-contrast mode. これらのプロパティを使用して、ハイコントラスト モードがアクティブかどうかを判断し、アクティブの場合は使用する色を指定します。Use these properties to determine whether high-contrast mode is active and, if it is, what colors to use.

Power BI がハイコントラスト モードであることを検出するDetect that Power BI is in high-contrast mode

host.colorPalette.isHighContrasttrue の場合は、ハイコントラスト モードがアクティブであり、ビジュアルはそれに応じて描画されます。If host.colorPalette.isHighContrast is true, high-contrast mode is active and the visual should draw itself accordingly.

ハイコントラストの色を取得するGet high-contrast colors

ハイコントラスト モードの場合、ビジュアルでは以下の設定だけを使用する必要があります。In high-contrast mode, your visual should limit itself to the following settings:

  • 前景色は、線、アイコン、テキスト、輪郭、または図形の塗りつぶしを描画するために使用されます。Foreground color is used to draw any lines, icons, text, and outline or fill of shapes.
  • 背景色は、背景および線で囲まれた図形の塗りつぶしの色として使用されます。Background color is used for background, and as the fill color of outlined shapes.
  • 前景に選択された色は、選択された要素またはアクティブな要素を示すために使用されます。Foreground - selected color is used to indicate a selected or active element.
  • ハイパーリンクの色は、ハイパーリンク テキストに対してのみ使用されます。Hyperlink color is used only for hyperlink text.

注意

2 番目の色が必要な場合は、ある程度の不透明度で前景色を使用できます (Power BI のネイティブ ビジュアルでは 40% の不透明度が使用されます)。If a secondary color is needed, foreground color may be used with some opacity (Power BI native visuals use 40% opacity). ビジュアルの詳細を見やすくするために、これは控えめに使用してください。Use this sparingly to keep the visual details easy to see.

初期化の間に、これらの値を格納できます。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;
    }

または、初期化の間に host オブジェクトを格納し、更新の間に関連する colorPalette プロパティにアクセスすることもできます。Or you can store the host object during initialization and access the relevant colorPalette properties during update.

更新時On update

ハイコントラスト サポートの具体的な実装はビジュアルに応じて異なり、グラフィック デザインの詳細に依存します。The specific implementations of high-contrast support vary from visual to visual and depend on the details of the graphic design. 重要な詳細情報を限られた色で区別しやすくするため、通常、ハイコントラスト モードでは、既定のモードとは若干異なるデザインが必要になります。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.

Power BI のネイティブ ビジュアルは、次のガイドラインに従っています。Power BI native visuals follow these guidelines:

  • すべてのデータ ポイントで同じ色 (前景) が使用されます。All data points use the same color (foreground).
  • すべてのテキスト、軸、矢印、線などでは、前景色が使用されます。All text, axes, arrows, lines, and so on use the foreground color.
  • 厚みのある図形は、太いストローク (少なくとも 2 ピクセル) と背景色の塗りつぶしを使用して、枠線として描画されます。Thick shapes are drawn as outlines, with thick strokes (at least two pixels) and background color fill.
  • データ ポイントが関連する場合、データ ポイントは異なるマーカー図形によって区別され、データ行は異なる破線によって区別されます。When data points are relevant, they're distinguished by different marker shapes, and data lines are distinguished by different dashing.
  • あるデータ要素が強調表示されると、他のすべての要素の不透明度が 40% に変わります。When a data element is highlighted, all other elements change their opacity to 40%.
  • スライサーの場合、アクティブなフィルター要素では前景に選択された色が使用されます。For slicers, active filter elements use foreground-selected color.

たとえば、次のサンプルの棒グラフでは、すべてのバーが太さ 2 ピクセルの前景の枠線および背景の塗りつぶしで描画されています。In the following sample bar chart, for example, all bars are drawn with two pixels of thick foreground outline and background fill. 既定の色と、2 つのハイコントラスト テーマを使用した場合の外観を比較してください。Compare the way it looks with default colors and with a couple of high-contrast themes:

標準色を使用したサンプルの棒グラフ 黒 #2 の色テーマを使用したサンプルの棒グラフ 白 の色テーマを使用したサンプルの棒グラフSample Bar Chart using standard colors Sample Bar Chart using Dark #2 color theme Sample Bar Chart using White color theme

次のセクションでは、ハイコントラストをサポートするために変更された visualTransform 関数の 1 つの場所を示します。The next section shows one place in the visualTransform function that was changed to support high contrast. それは、更新の間にレンダリングの一部として呼び出されます。It's called as part of rendering during the update.

適用前Before

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

より後After

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