PlotlyDash添加全屏按钮到Modebar

想要在 Plotly Dash 应用中提升数据可视化体验？本文教你如何为 Plotly 图表的 modebar 添加全屏显示图标，让用户更方便地查看图表。通过在 Dash 应用的 assets 文件夹中添加自定义 JavaScript 代码，即可实现在 modebar 中增加一个全屏按钮。该方法依赖 Font Awesome 图标库，只需简单几步，就能让你的 Dash 应用拥有全屏显示功能。本文详细介绍了实现步骤，包括创建 JavaScript 文件、放置到 assets 文件夹、引入 Font Awesome，并提供了示例代码。快来学习如何在 Plotly Dash 应用中添加全屏图标，提升用户体验吧！

本文介绍了如何在 Plotly Dash 应用中为 Plotly 图表的 modebar 添加全屏显示图标。通过在 Dash 应用的 assets 文件夹中添加自定义 JavaScript 代码，可以实现在 modebar 中增加一个全屏按钮，点击该按钮可以将对应的 Plotly 图表切换到全屏模式，提升数据可视化体验。该方法依赖 Font Awesome 图标库。

实现步骤

要在 Plotly Dash 应用中添加全屏图标到 modebar，需要创建一个 JavaScript 文件，并将其放置在 Dash 应用的 assets 文件夹中。Dash 会自动将 assets 文件夹中的 JavaScript 文件加载到应用中。

1. 创建 JavaScript 文件:

   创建一个名为 fullscreen.js (或者任何你喜欢的名字) 的文件，并将以下代码复制到该文件中：

   //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，并在 modebar 的最后一组按钮中添加一个全屏按钮。
   • fullscreen(el) 函数：该函数负责处理全屏按钮的点击事件。它会找到最近的 .dash-graph 元素，并将其切换到全屏模式。
   • window.fetch = new Proxy(window.fetch, { ... })：这段代码使用 Proxy 拦截了 fetch 函数，以便在 Dash 应用更新组件后，重新调用 addToModbar() 函数，确保全屏按钮在每次更新后都存在。

2. 将 JavaScript 文件放置在 assets 文件夹中:

   确保你的 Dash 应用的根目录下有一个名为 assets 的文件夹。如果没有，创建一个。然后将 fullscreen.js 文件放置在该文件夹中。

3. 引入 Font Awesome:

   该代码依赖 Font Awesome 图标库来显示全屏图标。你需要在你的 Dash 应用中引入 Font Awesome。最简单的方法是在 Dash 应用的 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" />

   可以将这段代码添加到 Dash 应用的 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)

4. 运行 Dash 应用:

   运行你的 Dash 应用。现在，你应该看到每个 Plotly 图表的 modebar 中都有一个全屏图标。点击该图标可以将图表切换到全屏模式。

注意事项

• 确保你的 Dash 应用的 assets 文件夹中包含 fullscreen.js 文件。
• 确保你的 Dash 应用中引入了 Font Awesome 图标库。
• 该代码使用了 Proxy 拦截了 fetch 函数，这可能会与其他 JavaScript 代码产生冲突。如果遇到问题，可以尝试修改代码，例如使用 MutationObserver 来监听 DOM 变化。
• 全屏功能的兼容性取决于浏览器。某些浏览器可能不支持全屏 API。

总结

通过添加自定义 JavaScript 代码到 Dash 应用的 assets 文件夹中，可以轻松地为 Plotly 图表的 modebar 添加全屏图标。这可以提升数据可视化体验，并为用户提供更方便的查看图表的方式。 记住引入 Font Awesome 图标库，并注意可能存在的兼容性问题。

到这里，我们也就讲完了《PlotlyDash添加全屏按钮到Modebar》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！