次の方法で共有


セレクターを使用して、影響を受けるビジュアルを制御する

一部の機能では、セレクターを使用して、影響を受けるビジュアルを制御できます。 セレクターは省略可能であり、表示されない場合は、レポート内のすべてのビジュアルに設定が適用されます。

サポートされている機能

セレクターは、次の機能で使用できます。

セレクターの種類

ビジュアル名

指定したビジュアルにのみ設定を適用します。

selector: {
    $schema: "http://powerbi.com/product/schema#visualSelector",
    visualName: <a visual name> // You can retrieve the name using `getVisuals`
}

ビジュアル名を見つけるには、ページで API を getVisuals() 使用し、ビジュアルの name プロパティを取得できます。 ビジュアル名は一意の識別子です。

ビジュアルの種類

指定した型のすべてのビジュアルに設定を適用します。

selector: {
    $schema: "http://powerbi.com/product/schema#visualTypeSelector",
    visualType: <a visual type> // You can retrieve the type using `getVisuals`
}

ビジュアルの種類を見つけるには、ページで API を getVisuals() 使用し、ビジュアルの type プロパティを取得できます。

スライサー ターゲット

指定したターゲットを持つスライサーにのみスライサーの状態を適用します。

selector: {
    $schema: "http://powerbi.com/product/schema#slicerTargetSelector",
    target: <target data field>  
}

ビジュアル ヘッダーの設定

  • レポート内のすべてのビジュアル ヘッダーを非表示にします。

    let config = {
        …
        settings: {
            …
            visualSettings: {
                visualHeaders: [
                    {
                        settings: {
                            visible: false
                        }
                        /* No selector - Hide visual header for all the visuals in the report */
                    }
                ]
            }
        }
    };
    
  • ビジュアル セレクターを使用して、特定のビジュアルのビジュアル ヘッダーを非表示にします。

    let config = {
        …
        settings: {
            …
            visualSettings: {
                visualHeaders: [
                    {
                        settings: {
                            visible: false
                        }
                        selector: {
                            $schema: "http://powerbi.com/product/schema#visualSelector",
                            visualName: "VisualContainer1",
                        }
                    }
                ]
            }
        }
    };
    

メニュー コマンド拡張機能と組み込みコマンドの両方で、サポート セレクターが表示されます。

  • 特定のビジュアル オプション メニューに拡張コマンドを追加する。

    let config = {
        ...
        settings: {
            ...
    
            // Adding the extension command to the options menu
            extensions: [
                {
                    command: {
                        name: "campaign",
                        title: "Start campaign",
                        icon: base64Icon,
                        selector: {
                            $schema: "http://powerbi.com/product/schema#visualSelector",
                            visualName: tableVisualName
                        },
                        extend: {
                            visualOptionsMenu: {
                                title: "Start campaign",
                                menuLocation: models.MenuLocation.Top,
                            }
                        }
                    }
                },
            ],
        }
    }
    
  • 型を持つすべてのビジュアルに対して、いくつかの組み込みコマンドを table 非表示にします。

    let tableSelector = {
        $schema: "http://powerbi.com/product/schema#visualTypeSelector",
        visualType: 'table'
    };
    
    let config = {
        ...
        settings: {
            ...
            // Hiding built-in commands on the options menu
            commands: [
                {
                    spotlight: {
                        selector: tableSelector,
                        displayOption: models.CommandDisplayOption.Hidden,
                    },
                    exportData: {
                        selector: tableSelector,
                        displayOption: models.CommandDisplayOption.Hidden,
                    },
                    seeData: {
                        selector: tableSelector,
                        displayOption: models.CommandDisplayOption.Hidden,
                    },
                }
            ]
        },
    };
    

読み込み時のスライサー

Note

読み込み時のスライサーは、ビジュアル型セレクターをサポートしていません

  • 名前で特定のスライサーを設定する

    let slicers = [
        {
            selector: {
                $schema: "http://powerbi.com/product/schema#visualSelector",
                visualName: "d1feb8891635af3b335a"
            },
            state: {
                filters: [
                {
                    $schema:"http://powerbi.com/product/schema#advanced",
                    target: {
                        table: "Store",
                        column: "StoreNumber"
                    },
                    filterType: models.FilterType.AdvancedFilter,
                    logicalOperator: "And",
                    conditions: [
                        { operator: "GreaterThanOrEqual", value: 37 },
                        { operator: "LessThanOrEqual", value: 576 }]
                }]
            }
        }
    ];
    
    embedConfig = {
        slicers: slicers,
        ...
    };
    
  • ターゲット別にスライサーを設定する

    // We want to slice all slicers with "StoreNumber" column target
    let target = {
        table: "Store",
        column: "StoreNumber"
    };
    
    let slicers = [
        {
            selector: {
                $schema: "http://powerbi.com/product/schema#slicerTargetSelector",
                target: target
            },
            state: {
                filters: [
                {
                    $schema:"http://powerbi.com/product/schema#advanced",
                    target: target,
                    filterType: models.FilterType.AdvancedFilter,
                    logicalOperator: "And",
                    conditions: [
                        {operator: "GreaterThanOrEqual", value: 37 },
                        {operator: "LessThanOrEqual", value: 576 }]
                }]
            }
        }
    ];
    
    embedConfig = {
        slicers: slicers,
        ...
    };
    

次のステップ