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)
});
});
效果：
Python使用Flask框架，结合Highchart，自定义导出菜单项目及顺序的更多相关文章
- Python基于Flask框架配置依赖包信息的项目迁移部署小技巧
一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...
- Python使用Flask框架，结合Highchart，自定义基本上算是最全的导出菜单了
说用:引入export-data.js文件后,导出菜单中会自动显示出相应的导出选项,只需要在lang中换成中文名即可. 本实例除了包含系统自带的,还包括自定义的导出菜单等. html代码 <!D ...
- 使用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框架入门-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: ...
随机推荐
- jvm学习理解
1.本文是转载别人所写的,因为这个jvm看很多遍老是忘,转载只是备忘和查看方便. 转载地址: https://mp.weixin.qq.com/s/reFDCkUdq1QGGDs_Mnuesg 图中涉 ...
- bzoj 1742: [Usaco2005 nov]Grazing on the Run 边跑边吃草【区间dp】
挺好的区间dp,状态设计很好玩 一开始按套路设f[i][j],g[i][j]为吃完(i,j)区间站在i/j的最小腐败值,后来发现这样并不能保证最优 实际上是设f[i][j],g[i][j]为从i开始吃 ...
- bzoj4758: [Usaco2017 Jan]Subsequence Reversal(区间dp)
4758: [Usaco2017 Jan]Subsequence Reversal Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 76 Solved ...
- c语言程序设计案例教程（第2版）笔记（五）-软件开发基础知识
零散知识点: 软件的主要特征 软件是一种逻辑产品,而不是有型的物质: 软件需要设计.开发,但不是传统意义上的产品制造: 软件不会磨损,但软件需要维护,即:修改代码或增加模块: 虽然软件行业正在向基于组 ...
- 理解Javascript的闭包【转】
什么是闭包 闭包是什么?闭包是Closure,这是静态语言所不具有的一个新特性.但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是: 闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会 ...
- 题解报告：hdu1219AC Me
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1219 Problem Description Ignatius is doing his homewo ...
- ssrs 2016, mobile report error: The report may be misconfigured, the data may not be available, or the server version may be unsupported.
使用多账户配置ssrs mobile report 权限后,使用客户端显示: 使用web 查阅,显示: 遇到这种情况,可能是由于,report引用了 数据集文件夹中的数据集,请记得把数据集文件夹上为该 ...
- yii2 设置多个入口文件
在web下希望加个core.php的后台入口,但因为权限问题,总是会跳转到index.php
- chromedriver与chrome版本对应
今天把手头有的一些关于selenium测试的资源整理了一下,分享出来. 1. 所有版本chrome下载 是不是很难找到老版本的chrome?博主收集了几个下载chrome老版本的网站,其中哪个下载的是 ...
- 转】用Hadoop构建电影推荐系统
原博文出自于: http://blog.fens.me/hadoop-mapreduce-recommend/ 感谢! 用Hadoop构建电影推荐系统 Hadoop家族系列文章,主要介绍Hadoop家 ...