Python使用Flask框架,结合Highchart,自定义基本上算是最全的导出菜单了
说用:引入export-data.js文件后,导出菜单中会自动显示出相应的导出选项,只需要在lang中换成中文名即可。
本实例除了包含系统自带的,还包括自定义的导出菜单等。
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> <!-- 导出 Excel 数据文件 --> <script src="static/export-data.js"></script> </head> <body> <!-- 图表容器 DOM --> <div id="container" style="min-width:400px;height:400px;"></div> <script src="static/b.js"></script> </body> </html>
js代码
$(function () { // 本地化导出按钮中的文字,具体请参考 https://www.hcharts.cn/docs/basic-lang Highcharts.setOptions({ lang: { contextButtonTitle: "图表导出菜单", downloadJPEG: "下载 JPEG 图片", downloadPDF: "下载 PDF 文件", downloadPNG: "下载 PNG 文件", downloadSVG: "下载 SVG 文件", printChart: "打印图表", downloadCSV: '下载 CSV 文件', downloadXLS: '下载 XLS 文件', viewData: '查看数据表格' } }); // 默认的导出菜单选项,是一个数组 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 文件 dafaultMenuItem[6], // 默认的分割线 dafaultMenuItem[7], // 默认的下载 CSV 文件 dafaultMenuItem[8], // 默认的下载 XLS 文件 dafaultMenuItem[9], // 查看数据表格 { 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) }); });
效果:
分类:
Highcharts教程
, Python
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)