向 Plotly Dash 应用的 Modebar 添加全屏图标

本文介绍了如何在 Python Dash 应用中的 Plotly 图表的 Modebar 上添加全屏图标。通过在 Dash 应用的 assets 文件夹中添加自定义 JavaScript 代码，并利用 Font Awesome 图标，我们可以在 Modebar 上创建一个全屏按钮，允许用户将图表切换到全屏模式。

实现步骤

要在 Plotly Dash 应用中添加全屏图标，需要以下步骤：

1. 创建 assets 文件夹： 如果你的 Dash 应用还没有 assets 文件夹，请在应用根目录下创建一个。Dash 会自动将 assets 文件夹中的静态文件（如 CSS、JavaScript）提供给应用。

2. 创建 JavaScript 文件： 在 assets 文件夹中创建一个 JavaScript 文件，例如 fullscreen.js，并将以下代码复制到该文件中。

   

   有道智云AI开放平台

   有道智云AI开放平台

   下载

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

   这段代码做了以下几件事：

   • 定义了 addToModbar() 函数，该函数会在 Plotly 图表的 Modebar 上添加一个全屏按钮。
   • 定义了 fullscreen(el) 函数，该函数处理全屏按钮的点击事件，切换图表的全屏模式。
   • 使用 window.fetch 拦截 Dash 的组件更新请求，并在组件更新后调用 addToModbar() 函数，确保全屏按钮在每次图表更新后都能正确添加。

3. 引入 Font Awesome： 该脚本依赖 Font Awesome 图标库。你需要在 Dash 应用中引入 Font Awesome。最简单的方法是在 Dash 应用的 HTML head 中添加 Font Awesome 的 CDN 链接。 你可以在你的Dash App的布局文件中添加以下代码：

   import dash
   import dash_html_components as html
   
   app = dash.Dash(__name__, external_stylesheets=['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'])
   
   app.layout = html.Div([
       # Your app layout here
   ])
   
   if __name__ == '__main__':
       app.run_server(debug=True)

4. 运行 Dash 应用： 运行你的 Dash 应用。现在，你应该能够在 Plotly 图表的 Modebar 上看到一个全屏图标。

注意事项

• 确保你的 Dash 应用正确配置了 assets 文件夹。
• 确保你的 Dash 应用引入了 Font Awesome 图标库。
• 这段代码使用 JavaScript 操作 DOM，可能会受到 Dash 组件更新的影响。如果全屏按钮消失，请检查代码是否正确处理了组件更新。
• 代码中使用 setTimeout 函数延迟调用 addToModbar() 函数。你可以根据实际情况调整延迟时间。

总结

通过以上步骤，你可以轻松地向 Plotly Dash 应用的 Modebar 添加全屏图标，提升用户体验。 这种方法利用了 Dash 的 assets 文件夹和自定义 JavaScript 代码，实现了灵活的界面定制。 记住，确保正确引入 Font Awesome，并注意组件更新可能带来的影响。