向 Python Dash 應(yīng)用的 Plotly 圖表模式欄添加全屏圖標(biāo)

在 Dash 應(yīng)用中，Plotly 圖表提供了一個模式欄（Modebar），用于控制圖表的交互行為，例如縮放、平移、下載等。有時，我們希望為用戶提供一個更直觀的全屏顯示圖表的選項。雖然 Plotly 本身沒有直接提供全屏按鈕，但我們可以通過自定義 JavaScript 代碼，將其添加到模式欄中。

實現(xiàn)步驟

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

   在 Dash 應(yīng)用的根目錄下創(chuàng)建一個名為 assets 的文件夾。Dash 會自動將該文件夾中的 CSS 和 JavaScript 文件加載到應(yīng)用中。

   立即學(xué)習(xí)“Python免費(fèi)學(xué)習(xí)筆記（深入）”；

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

   在 assets 文件夾中創(chuàng)建一個 JavaScript 文件，例如 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ù)制

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

   

   愛圖表

   AI驅(qū)動的智能化圖表創(chuàng)作平臺

   99

   查看詳情
   • addToModbar(): 查找頁面上所有的 Plotly 圖表的模式欄，并在每個模式欄的最后一組按鈕中添加一個全屏按鈕。該按鈕使用 Font Awesome 的全屏圖標(biāo) (fa-solid fa-maximize)。
   • fullscreen(el): 當(dāng)用戶點擊全屏按鈕時，該函數(shù)會被調(diào)用。它會找到包含圖表的 .dash-graph 元素，并使用瀏覽器的全屏 API 將其設(shè)置為全屏顯示。
   • window.fetch = new Proxy(window.fetch, ...): 這段代碼攔截了 Dash 應(yīng)用的 fetch 請求。每當(dāng) Dash 應(yīng)用更新組件時，它會延遲 1 秒后調(diào)用 addToModbar() 函數(shù)，以確保全屏按鈕在圖表更新后仍然存在。

3. 引入 Font Awesome:

   由于代碼使用了 Font Awesome 圖標(biāo)，需要在 Dash 應(yīng)用中引入 Font Awesome 的 CSS 文件。 最簡單的方法是在 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)用的 index.html 文件中，或者使用 Dash 的 dash.Dash.index_string 屬性進(jìn)行自定義。

注意事項

• 確保 Font Awesome 的 CSS 文件已正確引入，否則全屏按鈕將無法顯示圖標(biāo)。
• addToModbar 函數(shù)使用 setTimeout 延遲調(diào)用，以確保在 Dash 應(yīng)用更新組件后，全屏按鈕仍然存在?？梢愿鶕?jù)實際情況調(diào)整延遲時間。
• 該代碼依賴于 Plotly 圖表的 HTML 結(jié)構(gòu)。如果 Plotly 的 HTML 結(jié)構(gòu)發(fā)生變化，可能需要修改代碼才能正常工作。

總結(jié)

通過以上步驟，就可以在 Python Dash 應(yīng)用的 Plotly 圖表模式欄中添加一個全屏按鈕，為用戶提供更方便的全屏顯示體驗。 這種方法利用了 Dash 的 assets 文件夾和自定義 JavaScript 代碼，實現(xiàn)了對 Plotly 圖表的增強(qiáng)。

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