6
Vue-Highcharts 提供导出 CSV 数据选项
source link: https://zhiqiang.org/it/vue-highcharts-export-data.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue-Highcharts 提供导出 CSV 数据选项
标准版的 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.
bootstrap 是一个前端库，做一些常见的布局和效果，能省掉至少 95%的功夫。最近直接从 v4 升级到 v5 ，发现网页有些布局就乱掉了。这里是调整笔记。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK