向 Plotly Dash 应用图表工具栏添加全屏图标

本文将详细介绍如何在 Plotly Dash 应用中为 Plotly 图表添加全屏图标。实现这一功能的核心在于利用 Dash 提供的 assets 文件夹，将自定义 JavaScript 代码嵌入到应用中，从而扩展 Plotly 图表的交互能力。

步骤详解

1. 创建 assets 文件夹：

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

2. 创建 JavaScript 文件：

   在 assets 文件夹中创建一个 JavaScript 文件，例如 fullscreen.js，并将以下代码复制到该文件中。这段代码的主要功能是：

   • 在每个 Plotly 图表的工具栏中添加一个全屏图标。
   • 监听全屏图标的点击事件，调用浏览器的全屏 API 实现全屏切换。
   • 使用 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：

   

   Huemint

   推荐！用AI自定义和谐配色

   53

   查看详情

   为了显示全屏图标，需要在 Dash 应用中引入 Font Awesome CSS。可以通过多种方式实现，例如：

   • 将 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',         href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'     ),     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 才能正确加载静态资源。
• Font Awesome CSS 必须正确引入，否则全屏图标将无法显示。
• JavaScript 代码中的 fa-solid fa-maximize 类名是 Font Awesome 6 的全屏图标类名，如果使用其他版本的 Font Awesome，请替换为相应的类名。
• 本教程提供的 JavaScript 代码适用于大多数 Plotly 图表，但对于某些特殊类型的图表，可能需要进行适当的调整。

总结

通过以上步骤，我们可以轻松地为 Plotly Dash 应用中的图表添加全屏图标，从而提升用户体验。该方案的核心在于利用 Dash 提供的 assets 文件夹，将自定义 JavaScript 代码嵌入到应用中，从而扩展 Plotly 图表的交互能力。 这种方法可以应用于其他 Plotly 图表定制需求，例如添加自定义按钮、修改工具栏样式等。