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

2 years ago

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 数据选项

作者: 张志强

, 发表于 2022-05-30

, 共 757 字 , 共阅读 27 次

标准版的 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 从 v4 升级到 v5 的注意事项

bootstrap 是一个前端库，做一些常见的布局和效果，能省掉至少 95%的功夫。最近直接从 v4 升级到 v5 ，发现网页有些布局就乱掉了。这里是调整笔记。

Recommend

www.tuicool.com 6 years ago
Cache

ASP.NET Core: Expense Manager Using EF Core and Highcharts

Introduction In this article, we will be creating a personal expense manager using APS.NET Core 2.1 and the Entity Framework Core code first approach. An expense manager tracks your daily expenses and provides...

Github github.com 5 years ago
Cache

GitHub - highcharts/highcharts: Highcharts JS, the JavaScript charting framework

readme.md Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers. Official website:

r-posts.com 5 years ago
Cache

Choropleth maps with Highcharts and Shiny

We use Choropleth maps to show differences in colors or shading of pre-defined regions like states or countries, which correspond to differences in quantitative...