向 Python Dash 应用的 Plotly 图表模式栏添加全屏图标

向 Python Dash 应用的 Plotly 图表模式栏添加全屏图标

在 Dash 应用中，Plotly 图表提供了一个模式栏（Modebar），用于控制图表的交互行为，例如缩放、平移、下载等。有时，我们希望为用户提供一个更直观的全屏显示图表的选项。虽然 Plotly 本身没有直接提供全屏按钮，但我们可以通过自定义 JavaScript 代码，将其添加到模式栏中。

实现步骤

1. 创建 assets 文件夹:

   在 Dash 应用的根目录下创建一个名为 assets 的文件夹。Dash 会自动将该文件夹中的 CSS 和 JavaScript 文件加载到应用中。

   立即学习“Python免费学习笔记（深入）”；

2. 创建 JavaScript 文件:

   在 assets 文件夹中创建一个 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
           }
   })

   登录后复制

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

   

   爱图表

   AI驱动的智能化图表创作平台

   99

   查看详情
   • addToModbar(): 查找页面上所有的 Plotly 图表的模式栏，并在每个模式栏的最后一组按钮中添加一个全屏按钮。该按钮使用 Font Awesome 的全屏图标 (fa-solid fa-maximize)。
   • fullscreen(el): 当用户点击全屏按钮时，该函数会被调用。它会找到包含图表的 .dash-graph 元素，并使用浏览器的全屏 API 将其设置为全屏显示。
   • window.fetch = new Proxy(window.fetch, ...): 这段代码拦截了 Dash 应用的 fetch 请求。每当 Dash 应用更新组件时，它会延迟 1 秒后调用 addToModbar() 函数，以确保全屏按钮在图表更新后仍然存在。

3. 引入 Font Awesome:

   由于代码使用了 Font Awesome 图标，需要在 Dash 应用中引入 Font Awesome 的 CSS 文件。 最简单的方法是在 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 应用的 index.html 文件中，或者使用 Dash 的 dash.Dash.index_string 属性进行自定义。

注意事项

• 确保 Font Awesome 的 CSS 文件已正确引入，否则全屏按钮将无法显示图标。
• addToModbar 函数使用 setTimeout 延迟调用，以确保在 Dash 应用更新组件后，全屏按钮仍然存在。可以根据实际情况调整延迟时间。
• 该代码依赖于 Plotly 图表的 HTML 结构。如果 Plotly 的 HTML 结构发生变化，可能需要修改代码才能正常工作。

总结

通过以上步骤，就可以在 Python Dash 应用的 Plotly 图表模式栏中添加一个全屏按钮，为用户提供更方便的全屏显示体验。 这种方法利用了 Dash 的 assets 文件夹和自定义 JavaScript 代码，实现了对 Plotly 图表的增强。

以上就是向 Python Dash 应用的 Plotly 图表模式栏添加全屏图标的详细内容，更多请关注php中文网其它相关文章！