本文介紹了如何在 Plotly Dash 應(yīng)用中為 Plotly 圖表的 modebar 添加全屏顯示圖標(biāo)。通過在 Dash 應(yīng)用的 assets 文件夾中添加自定義 JavaScript 代碼，可以實(shí)現(xiàn)在 modebar 中增加一個(gè)全屏按鈕，點(diǎn)擊該按鈕可以將對(duì)應(yīng)的 Plotly 圖表切換到全屏模式，提升數(shù)據(jù)可視化體驗(yàn)。該方法依賴 Font Awesome 圖標(biāo)庫(kù)。

實(shí)現(xiàn)步驟

要在 Plotly Dash 應(yīng)用中添加全屏圖標(biāo)到 modebar，需要?jiǎng)?chuàng)建一個(gè) JavaScript 文件，并將其放置在 Dash 應(yīng)用的 assets 文件夾中。Dash 會(huì)自動(dòng)將 assets 文件夾中的 JavaScript 文件加載到應(yīng)用中。

1. 創(chuàng)建 JavaScript 文件:

   創(chuàng)建一個(gè)名為 fullscreen.js (或者任何你喜歡的名字) 的文件，并將以下代碼復(fù)制到該文件中：

   //Script to show Plotly graph to fullscreen mode
   //Dependence on Font Awesome icons
   //Author: Dhirendra Kumar
   //Created: 26-Nov-2024
   
   function addToModbar() {
       const modeBars = document.querySelectorAll(".modebar-container");
       for(let i=0; i<modeBars.length; i++) {
           const modeBarGroups = modeBars[i].querySelectorAll(".modebar-group");
           const modeBarBtns = modeBarGroups[modeBarGroups.length - 1].querySelectorAll(".modebar-btn");
   
           if (modeBarBtns[modeBarBtns.length - 1].getAttribute('data-title') !== 'Fullscreen') {
               const aTag = document.createElement('a');
               aTag.className = "modebar-btn";
               aTag.setAttribute("rel", "tooltip");
               aTag.setAttribute("data-title", "Fullscreen");
               aTag.setAttribute("style", "color:gray");
               aTag.setAttribute("onClick", "fullscreen(this);");
               const iTag = document.createElement('i');
               iTag.className = 'fa-solid fa-maximize';
               aTag.appendChild(iTag);
               modeBarGroups[modeBarGroups.length - 1].appendChild(aTag);
           }
       }
   }
   
   function fullscreen(el) {
       elem = el.closest('.dash-graph');
       if (document.fullscreenElement) {
           if (document.exitFullscreen) {
               document.exitFullscreen();
           } else if (document.mozCancelFullScreen) { // Firefox
               document.mozCancelFullScreen();
           } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
               document.webkitExitFullscreen();
           } else if (document.msExitFullscreen) { // IE/Edge
               document.msExitFullscreen();
           }
       }
       else {
           if (elem.requestFullscreen) {
               elem.requestFullscreen();
           } else if (elem.mozRequestFullScreen) { // Firefox
               elem.mozRequestFullScreen();
           } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
               elem.webkitRequestFullscreen();
           } else if (elem.msRequestFullscreen) { // IE/Edge
               elem.msRequestFullscreen();
           }
       }
   }
   
   window.fetch = new Proxy(window.fetch, {
       apply(fetch, that, args) {
           // Forward function call to the original fetch
           const result = fetch.apply(that, args);
   
           // Do whatever you want with the resulting Promise
           result.then((response) => {
               if (args[0] == '/_dash-update-component') {
                   setTimeout(function() {addToModbar()}, 1000)
               }})
           return result
           }
   })

   登錄后復(fù)制

   這段代碼主要做了以下幾件事：

   • addToModbar() 函數(shù)：該函數(shù)負(fù)責(zé)找到所有的 Plotly 圖表的 modebar，并在 modebar 的最后一組按鈕中添加一個(gè)全屏按鈕。
   • fullscreen(el) 函數(shù)：該函數(shù)負(fù)責(zé)處理全屏按鈕的點(diǎn)擊事件。它會(huì)找到最近的 .dash-graph 元素，并將其切換到全屏模式。
   • window.fetch = new Proxy(window.fetch, { ... })：這段代碼使用 Proxy 攔截了 fetch 函數(shù)，以便在 Dash 應(yīng)用更新組件后，重新調(diào)用 addToModbar() 函數(shù)，確保全屏按鈕在每次更新后都存在。

2. 將 JavaScript 文件放置在 assets 文件夾中:

   確保你的 Dash 應(yīng)用的根目錄下有一個(gè)名為 assets 的文件夾。如果沒有，創(chuàng)建一個(gè)。然后將 fullscreen.js 文件放置在該文件夾中。

   

   AppMall應(yīng)用商店

   AI應(yīng)用商店，提供即時(shí)交付、按需付費(fèi)的人工智能應(yīng)用服務(wù)

   56

   查看詳情

3. 引入 Font Awesome:

   該代碼依賴 Font Awesome 圖標(biāo)庫(kù)來顯示全屏圖標(biāo)。你需要在你的 Dash 應(yīng)用中引入 Font Awesome。最簡(jiǎn)單的方法是在 Dash 應(yīng)用的 HTML 頭部添加以下代碼：

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

   登錄后復(fù)制

   可以將這段代碼添加到 Dash 應(yīng)用的 app.layout 中，例如：

   import dash
   import dash_html_components as html
   import dash_core_components as dcc
   import plotly.express as px
   
   app = dash.Dash(__name__)
   
   fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
   
   app.layout = html.Div([
       html.Link(
           rel="stylesheet",
           href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css",
           integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==",
           crossorigin="anonymous",
           referrerpolicy="no-referrer"
       ),
       dcc.Graph(figure=fig)
   ])
   
   if __name__ == '__main__':
       app.run_server(debug=True)

   登錄后復(fù)制

4. 運(yùn)行 Dash 應(yīng)用:

   運(yùn)行你的 Dash 應(yīng)用?，F(xiàn)在，你應(yīng)該看到每個(gè) Plotly 圖表的 modebar 中都有一個(gè)全屏圖標(biāo)。點(diǎn)擊該圖標(biāo)可以將圖表切換到全屏模式。

注意事項(xiàng)

• 確保你的 Dash 應(yīng)用的 assets 文件夾中包含 fullscreen.js 文件。
• 確保你的 Dash 應(yīng)用中引入了 Font Awesome 圖標(biāo)庫(kù)。
• 該代碼使用了 Proxy 攔截了 fetch 函數(shù)，這可能會(huì)與其他 JavaScript 代碼產(chǎn)生沖突。如果遇到問題，可以嘗試修改代碼，例如使用 MutationObserver 來監(jiān)聽 DOM 變化。
• 全屏功能的兼容性取決于瀏覽器。某些瀏覽器可能不支持全屏 API。

總結(jié)

通過添加自定義 JavaScript 代碼到 Dash 應(yīng)用的 assets 文件夾中，可以輕松地為 Plotly 圖表的 modebar 添加全屏圖標(biāo)。這可以提升數(shù)據(jù)可視化體驗(yàn)，并為用戶提供更方便的查看圖表的方式。 記住引入 Font Awesome 圖標(biāo)庫(kù)，并注意可能存在的兼容性問題。

以上就是為 Plotly Dash 應(yīng)用添加全屏圖標(biāo)到 Modebar的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！