说用：引入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，自定义基本上算是最全的导出菜单了的更多相关文章

  1. Python使用Flask框架，结合Highchart，自定义导出菜单项目及顺序

    参考链接: https://www.highcharts.com.cn/docs/export-module-overview https://api.hcharts.cn/highcharts#ex ...

  2. 使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)

    参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...

  3. python之Flask框架

    一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...

  4. Python之Flask框架项目Demo入门

    Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...

  5. Python基于Flask框架配置依赖包信息的项目迁移部署小技巧

    一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...

  6. Python的Flask框架入门-Ubuntu

    全文请见tuts code:An Introduction to Python's Flask Framework Flask是Python一个小而强大的web框架.学起来简单,用起来也容易,能够帮你 ...

  7. Python使用Flask框架，结合Highchart，自定义图表样式主题

    参考链接:https://www.highcharts.com.cn/docs/themes 1.使用官方提供的主题js文件,只需要在 highcharts.js 后引入对应的文件即可,不用修改原有的 ...

  8. 使用Python的Flask框架，结合Highchart，动态渲染图表

    服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...

  9. Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)

    参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...

随机推荐

  1. linux修改用户主目录的方法 (转载)

    转自:http://xiaomaimai.blog.51cto.com/1182965/274002 第一:修改/etc/passwd文件第二:usermod命令 详细说明如下:第一种方法:vi /e ...

  2. bzoj 2423: [HAOI2010]最长公共子序列【dp+计数】

    设f[i][j]为a序列前i个字符和b序列前j个字符的最长公共子序列,转移很好说就是f[i][j]=max(f[i-1][j],f[i][j-1],f[i-1][j-1]+(a[i]==b[j])) ...

  3. Quartz.NET一个开源的作业调度框架

    Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调度作业.它实现了作业和 ...

  4. 使用pabot并行执行robotframework用例

    主要观点:使用pabot并行运行robotframework,可以解决:robotframework执行案例时间长的问题 解决执行案例时间长的方案: 目的: 缩短案例的运行时间 两种方法: 将大的项目 ...

  5. C++中的显式构造函数

    有如下一个简单的复数类: class ClxComplex { public: ClxComplex(double dReal = 0.0, double dImage = 0.0) { m_dRea ...

  6. 【数据结构(C语言版)系列一】 线性表

    最近开始看数据结构,该系列笔记简单记录总结下所学的知识,更详细的推荐博主StrayedKing的数据结构系列,笔记部分也摘抄了博主总结的比较好的内容. 一些基本概念和术语 数据是对客观事物的符号表示, ...

  7. 数据结构 - 链队列的实行（C语言）

    数据结构-链队列的实现 1 链队列的定义 队列的链式存储结构,其实就是线性表的单链表,只不过它只能尾进头出而已, 我们把它简称为链队列.为了操作上的方便,我们将队头指针指向链队列的头结点,而队尾指针指 ...

  8. Canny检测理解和Matlab实现

    图象的边缘是指图象局部区域亮度变化显著的部分,该区域的灰度剖面一般可以看作是一个阶跃,既从一个灰度值在很小的缓冲区域内急剧变化到另一个灰度相差较大的灰度值. 1.Canny边缘检测的基本特征 (1) ...

  9. String Mark Codeforces - 895D

    一看好像会做的样子,就去做了一下,结果 猝不及防地T掉了 赶紧查了一下,没有死循环,复杂度也是对的,无果,于是翻了题解 题解没看懂,但是找到了标程,然后发现我被卡常了... 而且好像当时还过了前10个 ...

  10. 用for循环实现的菱形图案

    package com.wh.lingxing; import java.util.Scanner; public class LingXing { public static void main(S ...