一、exporting属性说明

默认情况下，HighCharts支持将图表导出为图片或打印功能的。也就是在图表的右上角有两个按钮。打击即可进行相应的操作。

实现导出和打印功能需要引入相应的js文件，也就是exporting.js（该文件存在于highCharts压缩包的/js/modules目录下）。

一般情况下，我们基本用不上该功能（不引入exporting.js即可去掉该功能），即使是使用该功能，也不用配置，默认的配置就可以。

二、exporting属性详解

参数 说明 默认值

buttons：{

exportButton：{…},

printButton:{…}

}

按钮属性，包括导出按钮（exportButton）及打印按钮（printButton）。

可配置相应按钮中具体的属性来改变按钮的大小、样式等

  
enabled 是否使用该功能，当我false时，则图表没有导出及打印功能 true
filename 导出图片文件的文件名，不包含后缀 chart
type 导出图的类型，有image/png, image/jpeg, application/pdf可选 image/png.
url 导出功能的服务器地址，导出功能需要相应的服务提供支持。你可以自己搭建服务器，在/exporting-server目录下有相应的源文件 http://export.highcharts.com
width 导出图片文件的宽度，相应的，高度这按照比例 800.0

三、实例说明

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="js/jquery.min.js"></script>

        <script type="text/javascript">

            $(function () {

            var chart;

            $(document).ready(function() {

                chart = new Highcharts.Chart({

                  chart: {

                    renderTo: 'container',

                    type: 'spline',

                  },

                  credits : {

                        enabled:false//不显示highCharts版权信息

                  },

                  exporting: {

                    //enabled:true,默认为可用，当设置为false时，图表的打印及导出功能失效

                    buttons:{    //配置按钮选项

                        printButton:{    //配置打印按钮

                            width:50,

                            symbolSize:20,

                            borderWidth:2,

                            borderRadius:0,

                            hoverBorderColor:'red',

                            height:30,

                            symbolX:25,

                            symbolY:15,

                            x:-200,

                            y:20

                        },

                        exportButton:{    //配置导出按钮

                            width:50,

                            symbolSize:20,

                            borderWidth:2,

                            borderRadius:0,

                            hoverBorderColor:'red',

                            height:30,

                            symbolX:25,

                            symbolY:15,

                            x:-150,

                            y:20

                        },

                    },

                    filename:'52wulian.org',//导出的文件名

                    type:'image/png',//导出的文件类型

                    width:800    //导出的文件宽度

                  },

                  xAxis: {

                    categories: ['2011-11','2011-12','2012-01','2012-02','2012-03']

                  },

                  series: [{

                        name: 'series1',

                           data: [2,4,5,9,2]

                       },{

                        name:'series2',

                        data:[3,5,7,2,1]

                    }]

                });

            });

            });

        </script>

    </head>

    <body>

        <script src="js/highcharts.js"></script>

        <script src="js/exporting.js"></script>

        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    </body>

</html>

四、效果截图

五、在线演示

六、资源下载

【HighCharts系列教程】七、导出属性——exporting的更多相关文章

  1. CRL快速开发框架系列教程十(导出对象结构)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  2. CRL快速开发框架系列教程七(使用事务)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  3. ASP.NET 5系列教程(七)完结篇-解读代码

    在本文中,我们将一起查看TodoController 类代码. [Route] 属性定义了Controller的URL 模板: [Route("api/[controller]") ...

  4. （转）NGUI系列教程七（序列帧动画UITexture 和 UIsprit）

    NGUI系列教程七(序列帧动画)   今天我给大家讲一下如何使用NGUI做序列帧动画.本节主要包括两方面内容,分别是使用UIspirit和使用UITexture 做序列帧动画.废话不说了,下面开始.还 ...

  5. 黄聪：Microsoft Enterprise Library 5.0 系列教程(七) Exception Handling Application Block

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(七) Exception Handling Application Block 使用企业库异常处理应用程序模块的 ...

  6. Spring Boot 系列教程18-itext导出pdf下载

    Java操作pdf框架 iText是一个能够快速产生PDF文件的java类库.iText的java类对于那些要产生包含文本,表格,图形的只读文档是很有用的.它的类库尤其与java Servlet有很好 ...

  7. webpack4 系列教程(七): SCSS提取和懒加载

    教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懒加载. 个人技术小站: https://god ...

  8. 【转】PyQt5系列教程(七)控件

    PyQt5系列教程(七)控件   软硬件环境 Windows 10 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.4 前言 控件是PyQt应用程序的基石.PyQt5自带很多不 ...

  9. 【HighCharts系列教程】九、语言属性——Lang

    一.lang属性说明 Lang属性主要用于配置显示的文字等语言相关属性. 主要可配置如下内容:小数点符号.导出相关文字.月份文字.星期文字等 lang属性不重要,无特殊情况,不用配置. 二.lang属 ...

随机推荐

  1. spring securiy使用总结

    我们常见的几个功能: 注册后直接登录,并且remember-me这种在网上找到很多注册后登录的,但是remember-me没有.其实解决方案还是看源码比较方便.a. 装载authenticationM ...

  2. Qt之日志输出窗口

    来源:http://blog.sina.com.cn/s/blog_a6fb6cc90101guz0.html 继上节所讲,Qt可以很容易的将一些日志信息保存到文件中,那么日志信息如何输出到窗口呢? ...

  3. 2--OC -- 类的创建与实例化

    2.OC -- 类的创建与实例化   一.OC类的简述 1.OC类分为2个文件:.h文件用于类的声明,.m文件用于实现.h的函数: 2.类是声明使用关键字:@interface.@end : 3.类是 ...

  4. cocos2d-x 3.x 橡皮擦功能

    1.HelloWorldScene.h cocos2d::DrawNode* _eraser; cocos2d::RenderTexture*_renderTexture; 2.HelloWorldS ...

  5. material design 的android开源代码整理

    material design 的android开源代码整理 1 android (material design 效果的代码库) 地址请点击:MaterialDesignLibrary 效果: 2 ...

  6. 使用过滤器（Filter）解决请求参数中文乱码问题（复杂方式）

    前述:      在写这篇笔记之前,对笔记中的设计模式进行介绍:      本篇笔记中将要使用到的设计模式是:装饰(包装)设计模式           (1)装饰(包装)设计模式口诀:         ...

  7. Git 分支 - 分支的衍合

    分支的衍合 把一个分支中的修改整合到另一个分支的办法有两种:merge 和 rebase(译注:rebase 的翻译暂定为“衍合”,大家知道就可以了.).在本章我们会学习什么是衍合,如何使用衍合,为什 ...

  8. MyEclipse8.5优化经验

    第一步: 取消自动validation    validation有一堆,什么xml.jsp.jsf.js等等,我们没有必要全部都去自动校验一下,只是需要的时候才会手工校验一下!    取消方法:   ...

  9. java邮件收发

    http://blog.csdn.net/ycg01/article/details/1394465 java邮件收发 标签: javaimportexceptionnulluserclass 200 ...

  10. TCP/IP模型各个层次的功能和协议

      层次名称 功    能 协    议 应用层 (Application Layer) 负责实现一切与应用程序相关的功能,对应OSI参考模型的上三层 FTP(文件传输协议) HTTP(超文本传输协议 ...