Python使用Flask框架，结合Highchart，自定义导出菜单项目及顺序
参考链接：
https://www.highcharts.com.cn/docs/export-module-overview
https://api.hcharts.cn/highcharts#exporting.chartOptions
图表导出模块是指提供了将网页中图表导出为常见的图片格式（PNG、JPG、SVG） 或 PDF 文档的功能模块，另外导出模块还提供了直接在网页中打印图表的功能。
图表的导出默认是提交数据（SVG 字符串或图表配置 JSON 字符串 ）到导出服务器上进行生成图片，另外我们提供的纯客户端导出的功能模块 offline-exporting.js 可以不需要导出服务器就可以完成这个操作。
导出功能需要额外的引入相关的文件，下面是示例代码：
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<!-- 需要保存导出功能模块文件是在 highcharts.js 之后引入 -->
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<!-- 客户端导出功能模块为可选选项 -->
<script src="http://cdn.hcharts.cn/highcharts/modules/offline-exporting.js"></script>
示例代码
1.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个 Highcharts 图表</title> <!-- 引入 jquery.js --> <script src="static/jquery-3.3.1.min.js"></script> <!-- 引入 highcharts.js --> <script src="static/highcharts-7.0.3.js"></script> <!-- 需要保存导出功能模块文件是在 highcharts.js 之后引入 --> <script src="static/exporting.js"></script> <!-- 客户端导出功能模块为可选选项 --> <script src="static/offline-exporting.js"></script> {# <script src="static/data.js"></script>#} </head> <body> <!-- 图表容器 DOM --> <div id="container" style="min-width:400px;height:400px;"></div> <script src="static/b.js"></script> </body> </html>
2.js代码
$(function () { // 本地化导出按钮中的文字，具体请参考 https://www.hcharts.cn/docs/basic-lang Highcharts.setOptions({ lang: { contextButtonTitle: "图表导出菜单", downloadJPEG: "下载 JPEG 图片", downloadPDF: "下载 PDF 文件", downloadPNG: "下载 PNG 文件", downloadSVG: "下载 SVG 文件", printChart: "打印图表" } }); // 默认的导出菜单选项，是一个数组 var dafaultMenuItem = Highcharts.getOptions().exporting.buttons.contextButton.menuItems; console.log(dafaultMenuItem); $('#container').highcharts({ credits: { enabled: false }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }], title: { text: '自定义导出菜单项目及顺序' }, exporting: { buttons: { contextButton: { // 自定义导出菜单项目及顺序 menuItems: [ dafaultMenuItem[0], // 默认的打印图表 dafaultMenuItem[1], // 默认的分割线 dafaultMenuItem[2], // 默认的下载 PNG 图片 dafaultMenuItem[3], // 默认的下载 JPEG 图片 dafaultMenuItem[4], // 默认的下载 PDF 文件 dafaultMenuItem[5], // 默认的下载 SVG 文件 { separator: true // 自定义的分割线 }, dafaultMenuItem[1], // 默认的分割线 { text: '下载 PDF 文件', // 自定义下载 PDF 文件 onclick: function () { this.exportChart({ type: 'application/pdf' // 可选的值有 image/png，image/jpeg，application/pdf 和 image/svg+xml。 默认是：image/png }); } }, { text: '下载 SVG 文件', // 自定义下载 SVG 文件 onclick: function () { this.exportChart({ type: 'image/svg+xml' }); } }, dafaultMenuItem[1], // 默认的分割线 { text: '跳转链接', onclick: function () { window.location.href = 'https://www.hcharts.cn'; } } ] } } } }, function () { setTimeout(function () { $('.highcharts-contextbutton').click(); }, 200) }); });
效果：
