如何建立易於行動裝置使用的 Power BI 視覺效果How to create mobile-friendly Power BI visuals

使用行動裝置在 Power BI 中扮演著重要的角色。Mobile consumption has a major role in Power BI. 其中一個優點是隨時隨地都能連線到資料。One of its strengths is staying connected to your data anytime, anywhere.

開發人員在建立 Power BI 視覺效果時,必須盡可能地為大量使用者解決每一種行動裝置的特殊限制,以提供最佳的行動裝置體驗。As a developer creating Power BI visuals, the unique constraints of each mobile device must be addressed to reach as many users as possible, and provide the best mobile experience.

使用適用於 Windows、iOS 和 Android 的 Power BI 應用程式,讓商務使用者只要輕輕一按,就能隨時掌握資料的完整觀點。Use the Power BI app for Windows, iOS, and Android to give your business users a comprehensive view of their data on the go, at the touch of their fingertips.

需求Requirements

開發易於行動裝置使用的視覺效果需要滿足下列條件:The following requirements are essential for mobile friendly visual development:

  • 轉譯Render

    Power BI 視覺效果必須在所有支援的行動裝置上轉譯 (包括支援的瀏覽器和應用程式),且要能夠順利地在報表、儀表板中或以 [焦點] 模式執行。Your Power BI visuals has to render on all supported mobile devices, including supported browsers and applications, with no errors in reports, dashboards, or when running in Focus mode.

  • 互動式Interactive

    互動式功能的提供方式必須與桌面裝置相同。Interactive functionality must be provided in the same way as it's provided for desktop devices. 所有在桌面瀏覽器上處理的事件都必須受到支援,或具有適用於行動裝置的類似事件處理常式。All events handled on desktop browsers must be supported, or have comparable event handlers for mobile devices.

    例如,資料點的基本瀏覽與選取項目,應該要具有與桌面瀏覽器相同的功能。For example, basic navigation and the selection of data points, should have the same functionality as in desktop browsers. 如果使用 Ctrl 進行視覺效果支援多重選取,開發人員就必須考慮為行動裝置新增類似的事件處理常式。If a visual supports multi-select using Ctrl, the developer needs to consider adding a similar event handler for mobile devices.

    下表提供行動裝置上的對應事件清單。The following table provides a list of corresponding events on mobile devices.

    滑鼠事件名稱Mouse event name 觸控事件名稱Touch event name
    click click
    mousemove touchmove
    mousedown touchstart
    mouseup touchend
    dblclick 使用外部程式庫use external library
    contextmenu 使用外部程式庫use external library
    mouseover touchmove
    mouseout touchmove (或外部程式庫)touchmove (or external library)
    wheel NaN

    注意

    並非所有行動或觸控式螢幕裝置都支援滑鼠 (或具有 mouse 前置詞) 事件。Not all mobile or touch screen devices support mouse (or mouse prefixed) events. 在這種情況下,即會同時處理「滑鼠」 和「觸控」 事件。In such cases, handle both mouse and touch events at the same time.

選用Optional

下列選項可選擇性使用,並用來建立更佳的終端使用者體驗。The following are considered optional and used to create a better end-user experience.

  • 轉譯Render

    若要支援規模較小的視覺效果,請嘗試新增可變更的格式選項,讓使用者能夠調整每個項目的大小。To support smaller visual sizes, try adding format options that the user can change to adjust the size of each element. 例如,將格式選項新增至標籤,以便在報表和儀表板中使用。For example, add format options to labels, for use in reports and dashboards. 此動作可供使用者針對各自的行動裝置自訂視覺效果。This allows users to customize a visual specifically for their mobile device.

    同樣設定也可套用至桌面瀏覽器中的視覺效果,並在必要時加以覆寫,以調整為較小型螢幕也適用的視覺效果。The same settings can also be applied to the visuals in desktop browsers, and if needed, be overridden to adapt the visual to smaller screens.

    注意

    若要最佳化 焦點 模式中的視覺效果,則需同時考慮直向與橫向螢幕大小方向,請參閱 以焦點模式顯示內容To optimize a visual in Focus mode, both portrait and landscape screen size orientations need consideration, see Display content in Focus mode.

  • 互動式Interactive

    考慮是否新增行動裝置限定的事件處理常式,例如拖曳和滾動。Consider the addition of mobile specific event handlers, such as dragging and scrolling.

  • 容錯移轉Failover

    視覺效果若無法在行動裝置上轉譯,則會顯示描述性的錯誤。A visual should show a descriptive error if it cannot render on the mobile device.

支援的瀏覽器和裝置Supported browsers and devices

Power BI 視覺效果必須在所有支援 Power BI 應用程式的裝置上轉譯。如需詳細資訊,請參閱支援 Power BI 的瀏覽器Power BI 行動裝置應用程式The Power BI visual must render on all devices supporting Power BI Apps, for more information see supported browsers for Power BI and Power BI mobile apps.

針對 Windows、iOS 和 Android 裝置的最新模型進行測試時,開發人員需慎重考慮品質層面。When testing against the latest models of Windows, iOS, and Android devices, the developer needs to consider most of these quality aspects.

後續步驟Next steps

若要開始使用,請參閱開發 Power BI 圓形卡片視覺效果To get started, see Developing a Power BI circle card visual.