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

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

标准版的 Highcharts 要想提供导出数据,可参考https://api.highcharts.com/highcharts/exporting.csv,核心是引入exporting.jsexport-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 中,可以使用下面代码,除了引入exportingexport-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.

类似文章:
导出:
bootstrap 是一个前端库,做一些常见的布局和效果,能省掉至少 95%的功夫。最近直接从 v4 升级到 v5 ,发现网页有些布局就乱掉了。这里是调整笔记。
很早开始,两步路就无法上传香山区域(包括好汉坡)相关的路线,提示路线无法备份,因此也无法直接分享。现在两步路上能搜索到的香山或好汉坡相关的路线都是绝版。