Vue-Highcharts 提供导出 CSV 数据选项

作者: , 共 757 字 , 共阅读 0

标准版的 Highcharts 要想提供导出数据，可参考https://api.highcharts.com/highcharts/exporting.csv，核心是引入exporting.js和export-data.js两个额外的 JS ，不需要做别的操作：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

它会在图的右上侧添加一个按钮，点击后可以导出数据图为图片，也可以直接导出数据为 CSV 文件，效果如下：

Highcharts的图导出CSV数据

在 Vue 中，可以使用下面代码，除了引入exporting和export-data两个模块外，还需要手工初始化：

import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'
import exportDataInit from 'highcharts/modules/export-data'

exportingInit(Highcharts)
exportDataInit(Highcharts)

Q. E. D.

类似文章：
相似度: 0.198
IT » javascript, vue
写项目的时候遇到有需要就往 package.json里面添加新的包，即使后面没用也忘了删除，结果越积累越多。depcheck是检查依赖项的工具，会提示哪些包没有实际用到。安装：
相似度: 0.129
编程 » javascript, vue, 网页前端开发
在写代码过程中，会定义一些变量但没有用，比如为了保持函数参数原型：
相似度: 0.109
编程 » vue, javascript, eslint, 网页前端开发
最近写一个 vue 的写法：
相似度: 0.096
IT » crontab, cronjob, Linux系统配置
导出：
相似度: 0.065
编程 » Python
在 Python 里，我们可以直接用 os.system 来执行系统命令（假设下面的 strip 是一个可以处理多个文件的第三者程序）：
相似度: 0.059
IT »
最近试用了一些 markdown 编辑器，之前最有名的是 simplemde， 2017 年之后未更新，有人在此基础上做了个 easymde，现在还有一些更新。
前一篇：
IT » bootstrap, 网页前端开发
bootstrap 是一个前端库，做一些常见的布局和效果，能省掉至少 95%的功夫。最近直接从 v4 升级到 v5 ，发现网页有些布局就乱掉了。这里是调整笔记。
后一篇：
户外 » 两步路, 户外装备, 户外APP
很早开始，两步路就无法上传香山区域（包括好汉坡）相关的路线，提示路线无法备份，因此也无法直接分享。现在两步路上能搜索到的香山或好汉坡相关的路线都是绝版。