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)
});
});
效果：
Python使用Flask框架，结合Highchart，自定义基本上算是最全的导出菜单了的更多相关文章
- Python使用Flask框架，结合Highchart，自定义导出菜单项目及顺序
参考链接: https://www.highcharts.com.cn/docs/export-module-overview https://api.hcharts.cn/highcharts#ex ...
- 使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)
参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...
- python之Flask框架
一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...
- Python之Flask框架项目Demo入门
Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...
- Python基于Flask框架配置依赖包信息的项目迁移部署小技巧
一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...
- Python的Flask框架入门-Ubuntu
全文请见tuts code:An Introduction to Python's Flask Framework Flask是Python一个小而强大的web框架.学起来简单,用起来也容易,能够帮你 ...
- Python使用Flask框架，结合Highchart，自定义图表样式主题
参考链接:https://www.highcharts.com.cn/docs/themes 1.使用官方提供的主题js文件,只需要在 highcharts.js 后引入对应的文件即可,不用修改原有的 ...
- 使用Python的Flask框架，结合Highchart，动态渲染图表
服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...
- Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)
参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...
随机推荐
- #if、#ifdef、#if defined之间的区别（转载）
转自:http://www.yucoat.com/c_program/difference_if_ifdef_if_defined.html #if的使用说明 #if的后面接的是表达式 #if (MA ...
- 哈理工OJ P2320：OX
题目链接:OX 题意 :给出一个3X3的黑白棋棋盘,棋盘上有若干黑白子,再给出下一个下的人,问下一个下的人能否赢 分析:考虑到只有39种状态,故用一个数保存目前棋盘的状态,记为value,再枚举空位D ...
- bzoj 2756 [SCOI2012]奇怪的游戏【二分+最大流】
达成成就:为二分调参 !:多次memset的话要把数组大小开严格一点,否则会T 看到网格图,首先黑白染色. 注意到每次操作都是在一个黑格子和一个白格子上进行的,也就是说,最后黑格子数字和白格子数字和的 ...
- 洛谷 P3622 [APIO2007]动物园【状压dp】
看成网络流建图想了好久... 实际上5个是可以状压的 设f[i][k]为到第i个围栏状态为k的方案数,因为考虑到重复,设g[i][k]记录i开始,状态为k的孩子有几个 状态转移很好想:f[j][k]= ...
- 51nod 1119 机器人走方格 V2 【组合数学】
挺水的但是我好久没写组合数了- 用这样一个思想,在1~m列中,考虑每一列上升几格,相当于把n-1个苹果放进m个篮子里,可以为空,问有几种方案. 这个就是一个组合数学经典问题了,考虑n个苹果放进m个篮子 ...
- Spring的事务传播性与隔离级别以及实现事物回滚
一.事务的四个特性(ACID) 原子性(Atomicity):一个事务中所有对数据库的操作是一个不可分割的操作序列,要么全做,要么全部做. 一致性(Consistency): 数据不会因为事务的执行而 ...
- c语言程序设计案例教程（第2版）笔记（六）—字符串处理实例
字符串处理 功能描述:从键盘输入一个文本行后,为用户提供菜单选择,实现字符串一些操作——显示文本行.查找并替换指定子串.删除指定子串.统计指定子串数目. 实现代码: #include<stdio ...
- Lightoj 1174 - Commandos (bfs)
题目链接: Lightoj 1174 - Commandos 题目描述: 有一军队秉承做就要做到最好的口号,准备去破坏敌人的军营.他们计划要在敌人的每一个军营里都放置一个炸弹.军营里有充足的士兵,每 ...
- DP Codeforces Round #260 (Div. 1) A. Boredom
题目传送门 /* 题意:选择a[k]然后a[k]-1和a[k]+1的全部删除,得到点数a[k],问最大点数 DP:状态转移方程:dp[i] = max (dp[i-1], dp[i-2] + (ll) ...
- 12c pdb expdp use DATA_PUMP_DIR meet ORA-39145
ORA-39002: invalid operation ORA-39070: Unable to open the log file. ORA-39087: directory name DATA_ ...