一、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

三、实例说明

  1. <html>
  2.     <head>
  3.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4.         <script type="text/javascript" src="js/jquery.min.js"></script>
  5.         <script type="text/javascript">
  6.             $(function () {
  7.             var chart;
  8.             $(document).ready(function() {
  9.                 chart = new Highcharts.Chart({
  10.                   chart: {
  11.                     renderTo: 'container',
  12.                     type: 'spline',
  13.                   },
  14.                   credits : {
  15.                         enabled:false//不显示highCharts版权信息
  16.                   },
  17.                   exporting: {
  18.                     //enabled:true,默认为可用，当设置为false时，图表的打印及导出功能失效
  19.                     buttons:{    //配置按钮选项
  20.                         printButton:{    //配置打印按钮
  21.                             width:50,
  22.                             symbolSize:20,
  23.                             borderWidth:2,
  24.                             borderRadius:0,
  25.                             hoverBorderColor:'red',
  26.                             height:30,
  27.                             symbolX:25,
  28.                             symbolY:15,
  29.                             x:-200,
  30.                             y:20
  31.                         },
  32.                         exportButton:{    //配置导出按钮
  33.                             width:50,
  34.                             symbolSize:20,
  35.                             borderWidth:2,
  36.                             borderRadius:0,
  37.                             hoverBorderColor:'red',
  38.                             height:30,
  39.                             symbolX:25,
  40.                             symbolY:15,
  41.                             x:-150,
  42.                             y:20
  43.                         },
  44.                     },
  45.                     filename:'52wulian.org',//导出的文件名
  46.                     type:'image/png',//导出的文件类型
  47.                     width:800    //导出的文件宽度
  48.                   },
  49.                   xAxis: {
  50.                     categories: ['2011-11','2011-12','2012-01','2012-02','2012-03']
  51.                   },
  52.                   series: [{
  53.                         name: 'series1',
  54.                            data: [2,4,5,9,2]
  55.                        },{
  56.                         name:'series2',
  57.                         data:[3,5,7,2,1]
  58.                     }]
  59.                 });
  60.             });
  61.             });
  62.         </script>
  63.     </head>
  64.     <body>
  65.         <script src="js/highcharts.js"></script>
  66.         <script src="js/exporting.js"></script>
  67.         <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
  68.     </body>
  69. </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. Android学习笔记之Spinner

    pinner就相当于Html中的下拉列表框,在下面的例子里我们共同学习一下spinner的使用. 属性: 属性名称 描述 android:prompt 该提示在下拉列表对话框显示时显示.(译者注:对话 ...

  2. Q_DISABLE_COPY

    QObject 中没有提供一个拷贝构造函数和赋值操作符给外界使用,其实拷贝构造和赋值的操作都是已经声明了的,但是它们被使用了Q_DISABLE_COPY() 宏放在了private区域.因此所有继承自 ...

  3. 根据View获取该控制器

    //根据View获取控制器 - (UIViewController*)viewController { for (UIView* next = [self superview]; next; next ...

  4. Unable to open connection to supplicant on "/data/misc/wifi/sockets/wlan0"

    在调试android wifi UI 的时候,出现了 logcat:  Unable to open connection to supplicant on "/data/misc/wifi ...

  5. 浅谈SQL Server 对于内存的管理

    简介 理解SQL Server对于内存的管理是对于SQL Server问题处理和性能调优的基本,本篇文章讲述SQL Server对于内存管理的内存原理. 二级存储(secondary storage) ...

  6. Openlays 3 绘制基本图形

    <body> <div id="menu"> <label>几何图形类型:</label> <select id=" ...

  7. java 协调同步的线程

    Example12_8.java public class Example12_8 { public static void main(String args[ ]) { TicketHouse of ...

  8. Linux中的挂载和卸载

    mkdir /home/xxx   创建挂载点 mount /dev/cdrom /home/xxx   把cdrom中的内容挂载到xxx目录 umount /dev/cdrom 卸载 /dev/sr ...

  9. AndroidGradle--瘦身apk（转发）

    apk瘦身一般有两条线, 去除无用的代码,例如引用一个比较大的lib,只使用了其中很少的功能.其他无用的代码可以想办法去掉 去除无用的资源文件,可能是第三方lib中的,也有可能是开发中引入了无用的资源 ...

  10. My workbench draft

    System Linux / Ubuntu 14.04.5 LTS (Trusty Tahr) + ROS Indigo Linux / Ubuntu 16.04.1 LTS (Xenial Xeru ...