在Vue项目中实现 highchart 图表的导出(下载)功能

突遇一个需求,需要项目中的图表支持下载(导出图表数据)的功能(后端懒得写下载文件接口)。
图表如图所示:
在这里插入图片描述
目前我的图表是在 Vue 项目中用 highchart 实现的,而我看到 highchart 的官方示例,几乎每个都有导出下载图表的功能。在这里插入图片描述
然后我以为是直接添加哪个配置,就可以轻易实现这个导出功能。
结果看了 js 的图表配置项,都是些常见的配置项,没啥特殊的,可为啥我的图表就没有这个导出按钮呢?在这里插入图片描述
于是我直接查找 highchart 官网的 api ,找到了一个导出意思的配置项 exporting在这里插入图片描述
于是我查看它里面的示例,然后发现它不仅有 exporting 配置项,原来 highchart 实例下会有一个 exportchart 的方法,能够实现自定义按钮导出。在这里插入图片描述
于是我按照上面的写法去添加了自定义导出按钮和事件,可控制台却报错了
代码如图:
在这里插入图片描述
控制台如图:在这里插入图片描述
highchart 图标的实例,我的的确确已经打印出来了,但是却报没有 exportChart 这个方法,我便从实例对象入手,于是我展开了我本地打印的实例和官网示例上的实例做了一个对比:
我本地的:在这里插入图片描述
官网示例:在这里插入图片描述
然后惊奇的发现,我本地的图表实例居然没有 exporting ,那这很明显,我本地的实例是不完整的 highchart 图标实例。
于是我去百度查询了下 vue 中的 highchart 图表导出报错问题,找到了一个帖子:
https://blog.csdn.net/weixin_30815427/article/details/97301451在这里插入图片描述
里面有在引入 highchart 基础上,而且多引入了两个文件 exporting.js 和 export-csv.js
鉴于官网的在 Vue 中使用 Highcharts 的文章中就有 引入 export-csv.js 的案例,于是我就先引入了 export-csv.js
在这里插入图片描述
在这里插入图片描述
结果使用 exportchart 方法还是报同样的错误,我打开 export-csv.js 去查找这个方法,发现居然没有 exportChart 方法。在这里插入图片描述
我仔细看了看了里面的代码,发现了两个类似导出的方法,但不叫 exportChart 在这里插入图片描述
于是我尝试调用了这两个方法,确实是有导出(下载)图表的数据
在这里插入图片描述
感觉好像需求已经满足了,毕竟是要下载数据文件,但是我想要的图表图片却没实现。
于是我再次下载了 exporting.js 文件,按 export-csv.js 的方法去引用,结果 exporting.js 文件报错了。
又遇到问题,先不慌,目标很明确,无非就是缺少了 exporting.js 相关的引入,而直接引入下载好的 exporting.js 似乎有不对,于是我再次借助了百度的力量,查询: Vue中使用highchart的exporting。
在出来的第一篇文章里,我看到了问题的答案。
在这里插入图片描述
原来 安装好的highcharts 依赖下面自己就有 exporting,我立马按这个路径去引入了 exporting 并利用引入的 exporting 修饰我的 highchart。
在这里插入图片描述
然后在自定义按钮的点击事件里调用实例的 exportChart 方法。
在这里插入图片描述
结果相当成功。
在这里插入图片描述

在这里插入图片描述

最后我决定两个方法都要写在上面,因为 export-csv.js 的导出 xls 或 csv 方法是不需要联网的,可以直接前端调用 html 方法生成,而下载图片需要请求 https://export.highcharts.com/ 生成。所以为了避免 highchart 这个服务出意外,暂且保留 xls 文件导出的功能吧!
export-csv.js 资源的下载地址

猜你喜欢

转载自blog.csdn.net/weixin_43589827/article/details/118342919