返回
ApexCharts图表全屏显示:两种实用方法详解
vue.js
2025-01-11 08:47:11
ApexCharts图表添加全屏视图功能
ApexCharts是一个功能强大的JavaScript图表库,广泛用于数据可视化。用户有时会期望图表具备全屏显示的能力,方便更加专注地分析数据。尽管官方文档未直接提供内置的viewFullscreen
选项,仍然有办法实现这个功能。
方法一:利用浏览器全屏 API
最直接的方式是使用浏览器提供的全屏API,结合ApexCharts提供的钩子函数来实现。
原理:
浏览器全屏API允许HTML元素占据整个屏幕,摆脱浏览器界面的束缚。 ApexCharts允许在图表渲染和更新时执行回调函数,借助这些回调,可以监听按钮点击事件并调用全屏 API。
步骤:
- 创建一个全屏按钮或链接。这个按钮应当放置在图表附近。
- 获取图表的DOM元素,利用
apexcharts
库提供的钩子函数如created
,可以取得chart 对应的 container element,之后将其包装,监听按钮点击事件。 - 点击按钮后,利用
requestFullscreen()
方法进入全屏模式,如果全屏 API 可用。如果API不可用(例如在不支持的浏览器中),则可以回退到使用自定义解决方案,例如使用一个模式窗口来放大图表。 - 在退出全屏模式时,利用
exitFullscreen()
方法恢复。此外,使用fullscreenchange
事件监听浏览器是否已退出全屏模式。 - 图表进入全屏后,可以动态调整大小以适应整个屏幕。
代码示例:
<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
监听fullscreenchange
与webkitfullscreenchange
事件,保证进入退出全屏之后图表能同步调整尺寸。- 对于某些浏览器,全屏功能需要考虑前缀 (
webkitRequestFullscreen
) ,使用polyfill
来兼容差异。 - 全屏退出之后,重置图表尺寸的逻辑也很重要。
方法二:自定义工具栏选项
还可以扩展ApexCharts的工具栏功能,加入自定义全屏按钮。
原理:
通过 ApexCharts 提供的自定义工具栏配置,可以在图表的右上角添加一个新的按钮。这个按钮点击后触发全屏逻辑,和方法一相似。
步骤:
- 修改 ApexCharts的配置,向工具栏的自定义项(
toolbar.tools.customIcons
) 添加全屏按钮的配置。 - 为这个按钮添加事件处理函数,调用全屏 API ,步骤和方法一相同。
- 控制按钮图标,可以使用 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 例如:download
、selection
, 这样会导致一些问题, 可以自定义class
属性例如:full-screen
,并配置style
, 控制css属性来配置按钮样式。 - 处理全屏切换过程中,建议使用
fullscreenchange
事件进行监听,防止不同浏览器的表现不一致。
总结
通过两种不同的方法可以给 ApexCharts 添加全屏功能。 方法一更加灵活,方便在任意地方自定义触发全屏的逻辑,方法二将全屏按钮融入了图表的工具栏中,使图表具备更一致的用户体验。 可以依据项目特点和具体的需求进行选择。
此技术博客通过剖析问题,提供多种解决思路和示例,期望能帮助读者有效解决实际开发中遇到的难题。