返回

ApexCharts图表全屏显示:两种实用方法详解

vue.js

ApexCharts图表添加全屏视图功能

ApexCharts是一个功能强大的JavaScript图表库,广泛用于数据可视化。用户有时会期望图表具备全屏显示的能力,方便更加专注地分析数据。尽管官方文档未直接提供内置的viewFullscreen选项,仍然有办法实现这个功能。

方法一:利用浏览器全屏 API

最直接的方式是使用浏览器提供的全屏API,结合ApexCharts提供的钩子函数来实现。

原理:

浏览器全屏API允许HTML元素占据整个屏幕,摆脱浏览器界面的束缚。 ApexCharts允许在图表渲染和更新时执行回调函数,借助这些回调,可以监听按钮点击事件并调用全屏 API。

步骤:

  1. 创建一个全屏按钮或链接。这个按钮应当放置在图表附近。
  2. 获取图表的DOM元素,利用apexcharts库提供的钩子函数如 created,可以取得chart 对应的 container element,之后将其包装,监听按钮点击事件。
  3. 点击按钮后,利用requestFullscreen() 方法进入全屏模式,如果全屏 API 可用。如果API不可用(例如在不支持的浏览器中),则可以回退到使用自定义解决方案,例如使用一个模式窗口来放大图表。
  4. 在退出全屏模式时,利用 exitFullscreen()方法恢复。此外,使用fullscreenchange事件监听浏览器是否已退出全屏模式。
  5. 图表进入全屏后,可以动态调整大小以适应整个屏幕。

代码示例:

<template>
  <div>
      <button @click="toggleFullscreen">
       {{ isFullScreen ? 'Exit Fullscreen' : 'View Fullscreen' }}
     </button>
    <div ref="chartContainer">
      <apexchart ref="apexChart"  type="line"  :options="chartOptions" :series="series" @mounted="handleChartMounted" ></apexchart>
    </div>
  </div>
</template>
<script>
  import VueApexCharts from 'vue3-apexcharts';

  export default {
    components: {
        apexchart: VueApexCharts
     },
      data() {
         return {
           series: [{data: [44, 55, 57, 56, 61, 58, 63, 60, 66]}],
            chartOptions:{
             chart: {
               id: 'vuechart-example'
              },
               xaxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
                }
             },
           isFullScreen: false,
           chart:null
           }
       },

      methods:{
          handleChartMounted() {
             this.chart =  this.$refs.apexChart.chart
          },

          toggleFullscreen(){
            const container =  this.$refs.chartContainer
             if (this.isFullScreen) {
               if (document.exitFullscreen) {
                   document.exitFullscreen();
                  } else if (document.webkitExitFullscreen) { /* Safari */
                      document.webkitExitFullscreen();
                }
                   this.isFullScreen = false;
             }else{

                  if(container.requestFullscreen)
                  {
                      container.requestFullscreen();
                  } else if (container.webkitRequestFullscreen) { /* Safari */
                   container.webkitRequestFullscreen();
                  }
                     this.isFullScreen = true
               }
           },

         mounted(){
            document.addEventListener('fullscreenchange', this.fullscreenChanged)
            document.addEventListener('webkitfullscreenchange',this.fullscreenChanged )

        },
           beforeUnmount(){
            document.removeEventListener('fullscreenchange',this.fullscreenChanged)
             document.removeEventListener('webkitfullscreenchange',this.fullscreenChanged)
         },

          fullscreenChanged(){
             if(!document.fullscreenElement  && !document.webkitFullscreenElement){
                 this.isFullScreen = false
             }else{
                this.isFullScreen=true
             }

               this.chart.updateOptions({chart:{height: this.isFullScreen? '100%': null,  width: this.isFullScreen? '100%' : null}})

           },
      },
    };
  </script>

此方案的关键点:

  • 利用chart 组件的 @mounted="handleChartMounted"钩子,在 mounted的时候可以取得组件对应的 chart 的实例。
  • document 监听 fullscreenchangewebkitfullscreenchange 事件,保证进入退出全屏之后图表能同步调整尺寸。
  • 对于某些浏览器,全屏功能需要考虑前缀 (webkitRequestFullscreen) ,使用 polyfill来兼容差异。
  • 全屏退出之后,重置图表尺寸的逻辑也很重要。

方法二:自定义工具栏选项

还可以扩展ApexCharts的工具栏功能,加入自定义全屏按钮。

原理:
通过 ApexCharts 提供的自定义工具栏配置,可以在图表的右上角添加一个新的按钮。这个按钮点击后触发全屏逻辑,和方法一相似。

步骤:

  1. 修改 ApexCharts的配置,向工具栏的自定义项(toolbar.tools.customIcons) 添加全屏按钮的配置。
  2. 为这个按钮添加事件处理函数,调用全屏 API ,步骤和方法一相同。
  3. 控制按钮图标,可以使用 css 根据是否处于全屏状态进行切换。

代码示例:

 chartOptions:{
             chart: {
                 toolbar:{
                   show:true,
                    tools:{
                          download:true,
                            selection: false,
                              zoom: true,
                             zoomin: true,
                             zoomout: true,
                            pan: true,
                        reset:true,
                        customIcons: [{
                        icon: "<svg class=\"fullscreen-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>",
                        index: 1,
                        title:"fullscreen",
                         class:'full-screen',
                          click: (chart) => this.handleFullscreenToolbarClick(chart.el)
                         },
                        ],
                   }
                 },
                  id: 'vuechart-example'
              },
            },


 handleFullscreenToolbarClick(container){

   if (this.isFullScreen) {
    if (document.exitFullscreen) {
         document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
      }
       this.isFullScreen = false;
      }else{
        if(container.requestFullscreen)
        {
           container.requestFullscreen();
        } else if (container.webkitRequestFullscreen) {
          container.webkitRequestFullscreen();
       }
         this.isFullScreen = true
    }

}

此方案的注意点:

  • 注意图标资源的处理,可以选用合适的 SVG 图标,并通过 css 控制按钮样式,提高可交互性。
  • 对于toolbar的按钮来说,可以通过设置chart 的height 和 width来实现,this.chart.updateOptions({chart:{height: this.isFullScreen? '100vh': null, width: this.isFullScreen? '100vw' : null}}), 这种情况下高度宽度用vh vw比较好。

安全建议

  • 全屏操作涉及到浏览器安全,要考虑用户的隐私和体验,确保逻辑清晰,不要误导用户。
  • 对于在方法二中使用的customIcons自定义工具栏元素,index属性注意要配置合适,并且 customIcons 数组中的内容不可直接复用内置按钮元素的 class 例如:downloadselection, 这样会导致一些问题, 可以自定义 class属性例如:full-screen,并配置 style, 控制css属性来配置按钮样式。
  • 处理全屏切换过程中,建议使用 fullscreenchange 事件进行监听,防止不同浏览器的表现不一致。

总结

通过两种不同的方法可以给 ApexCharts 添加全屏功能。 方法一更加灵活,方便在任意地方自定义触发全屏的逻辑,方法二将全屏按钮融入了图表的工具栏中,使图表具备更一致的用户体验。 可以依据项目特点和具体的需求进行选择。

此技术博客通过剖析问题,提供多种解决思路和示例,期望能帮助读者有效解决实际开发中遇到的难题。