使用PowerBI-JavaScript库嵌入Power BI视觉对象时如何设置聚焦模式？

当然可以！用PowerBI-JavaScript库嵌入视觉对象时，有两种常见方式来启用聚焦模式，我给你一步步拆解：

方法1：嵌入时直接启用聚焦模式 #

当你初始化嵌入配置的时候，可以通过配置参数让视觉对象加载后直接进入聚焦模式。具体来说，在你的嵌入配置对象里，添加settings -> visual -> isFocusMode属性并设为true：

const embedConfiguration = {
  type: 'visual',
  id: '<你的视觉对象ID>', // 替换成目标视觉对象的实际ID
  embedUrl: '<报表的嵌入URL>',
  accessToken: '<你的访问令牌>',
  tokenType: models.TokenType.Embed,
  settings: {
    visual: {
      isFocusMode: true // 开启聚焦模式
    }
  }
};

// 执行嵌入操作
const visual = powerbi.embed(document.getElementById('visualContainer'), embedConfiguration);

这样视觉对象加载完成后就会自动进入聚焦模式，占满整个嵌入容器，隐藏报表其他无关元素。

方法2：嵌入后通过API切换到聚焦模式 #

如果需要在用户交互（比如点击按钮）后再触发聚焦模式，可以用Power BI视觉对象实例的setFocusMode()方法：

// 先获取已嵌入的视觉对象实例
const visual = powerbi.get(document.getElementById('visualContainer'));

// 切换到聚焦模式
visual.setFocusMode(true)
  .then(() => {
    console.log('视觉对象已成功进入聚焦模式');
  })
  .catch(error => {
    console.error('切换聚焦模式失败:', error);
  });

// 若要退出聚焦模式，只需传入false
// visual.setFocusMode(false);

注意事项 #

• 确保你使用的PowerBI-JavaScript库版本是v2.11.0及以上，旧版本可能不支持这个API。
• 聚焦模式下，视觉对象会填充整个嵌入容器，所以要提前给容器设置合适的宽高样式。
• 如果你嵌入的是整个报表而非单个视觉对象，也可以先通过report.getVisualById('<视觉ID>')获取目标视觉对象实例，再调用setFocusMode()方法。

内容的提问来源于stack exchange，提问作者Random