向 Plotly Dash 應用圖表工具欄添加全屏圖標

本文將詳細介紹如何在 Plotly Dash 應用中為 Plotly 圖表添加全屏圖標。實現(xiàn)這一功能的核心在于利用 Dash 提供的 assets 文件夾，將自定義 JavaScript 代碼嵌入到應用中，從而擴展 Plotly 圖表的交互能力。

步驟詳解

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

   在 Dash 應用的根目錄下創(chuàng)建一個名為 assets 的文件夾。Dash 會自動將該文件夾下的 CSS、JavaScript 和圖片等靜態(tài)資源加載到應用中。

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

   在 assets 文件夾中創(chuàng)建一個 JavaScript 文件，例如 fullscreen.js，并將以下代碼復制到該文件中。這段代碼的主要功能是：

   • 在每個 Plotly 圖表的工具欄中添加一個全屏圖標。
   • 監(jiān)聽全屏圖標的點擊事件，調(diào)用瀏覽器的全屏 API 實現(xiàn)全屏切換。
   • 使用 Font Awesome 的全屏圖標。

   //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
           }
   })

   登錄后復制

3. 引入 Font Awesome CSS：

   

   愛圖表

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

   99

   查看詳情

   為了顯示全屏圖標，需要在 Dash 應用中引入 Font Awesome CSS?？梢酝ㄟ^多種方式實現(xiàn)，例如：

   • 將 Font Awesome CSS 文件下載到 assets 文件夾中，然后在 Dash 應用中引用。
   • 使用 CDN 鏈接，在 Dash 應用的 app.layout 中添加一個 dash.html.Link 組件。

   import dash
   import dash_html_components as html
   import dash_core_components as dcc
   import plotly.graph_objects as go
   
   app = dash.Dash(__name__)
   
   app.layout = html.Div([
       html.Link(
           rel='stylesheet',
           
       ),
       dcc.Graph(
           id='example-graph',
           figure={
               'data': [
                   {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                   {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
               ],
               'layout': {
                   'title': 'Dash Data Visualization'
               }
           }
       )
   ])
   
   if __name__ == '__main__':
       app.run_server(debug=True)

   登錄后復制

4. 運行 Dash 應用：

   運行 Dash 應用，即可看到 Plotly 圖表的工具欄中添加了全屏圖標。點擊該圖標，即可將圖表切換到全屏模式。

注意事項

• 確保 assets 文件夾的路徑正確，Dash 才能正確加載靜態(tài)資源。
• Font Awesome CSS 必須正確引入，否則全屏圖標將無法顯示。
• JavaScript 代碼中的 fa-solid fa-maximize 類名是 Font Awesome 6 的全屏圖標類名，如果使用其他版本的 Font Awesome，請?zhí)鎿Q為相應的類名。
• 本教程提供的 JavaScript 代碼適用于大多數(shù) Plotly 圖表，但對于某些特殊類型的圖表，可能需要進行適當?shù)恼{(diào)整。

總結

通過以上步驟，我們可以輕松地為 Plotly Dash 應用中的圖表添加全屏圖標，從而提升用戶體驗。該方案的核心在于利用 Dash 提供的 assets 文件夾，將自定義 JavaScript 代碼嵌入到應用中，從而擴展 Plotly 圖表的交互能力。 這種方法可以應用于其他 Plotly 圖表定制需求，例如添加自定義按鈕、修改工具欄樣式等。

以上就是向 Plotly Dash 應用圖表工具欄添加全屏圖標的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！