图表导出模块概述

图表导出模块是指提供了将网页中图表导出为常见的图片格式（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>

关于图表导出详细配置请参考 API 文档。

一、导出功能按钮及菜单

到启用了图表导出功能后，图表导出相关的功能按钮就会出现在图表的右上角，当点击按钮时，对应的导出操作菜单会展开，如下图所示：

1、按钮及菜单样式

导出按钮的样式可以通过 exporting.buttons.contextButton 及 navigation.buttonOptions 里的项目进行调整；菜单可以通过 navigation 里的选项进行控制。

导出按钮及菜单的文字可以通过 语言文字 相关配置进行本地化。

2、菜单项目及顺序

默认情况下导出菜单包括图表打印及下载文件选项，两者之间用分隔符隔开，可以通过 exporting.buttons.contextButton.menuItems 来调整菜单项，下面是一个具体的实例：

3、外部调用导出功能

我们可以通过相关的函数来调用导出相关的功能，相关的函数包括 chart.print()、Chart.exportChart() 及 Chart.exportChartLocal()

1）打印图表

通过调用 chart.print() 即可打印图表。

我们可以在打印相关的事件回调函数 chart.events.beforePrint 及 chart.events.afterPrint 里对图表打印之前及之后做处理，在 Highcharts 内部，图表在打印之前会调整到适合打印的尺寸，打印之后则恢复大小。

2）下载文件

chart.exportChart() 用于将图表导出，该函数包含两个参数 options 及 chartOptions，下面是示例代码：

chart.exportChart({
    type: 'application/pdf',
    filename: '外部调用导出函数'
});

在线试一试，更多内容请参考 API 文档。

Chart.exportChartLocal() 函数则是用本地导出，关于本地导出我们将在后面的教程里详细说明。

二、控制导出图片的大小

从 Highcharts 3.0 及 Highstock 1.3 开始，导出图片的大小基于以下规则：

• 同时配置 exporting.sourceWidth 和 exporting.sourceHeight 属性来指定导出图片大小。这种方法可以保证同一个图表在不同分辨率屏幕下导出的结果是一样的；

• 配置了 chart.with 和 chart.height ，那么导出尺寸就是这两个的参数值；

• 图表容器的设置了具体的宽度或高度的像素值，那么对应的高度或宽度生效。注意非像素值（比如百分比）的宽度或高度值是无效的；

• 默认的尺寸是 600 x 400 像素；

• 计算上面的尺寸渲染的图表后，图片中的文字大小也就基于这个尺寸确定了。最终的图片分辨率将会根据缩放比例（exporting.scale，默认值为 2）进行缩放，也就是 600x400 大小的图表 最终会导出为 1200x800 大小的图片，这么做（缩放比率默认值为 2）的原因很简单，如果我们设置了 sourceWidth sourceHeight 为 1200x800，并只将缩放比率设置为 1，那么最终结果图片中的文字就会过小，另外缩放比例为 1 的分辨率对于打印来说太小。

三、提交到服务器的参数说明

如果你需要控制提到导出服务器的数据，可以通过下面的参数（指的是发送 POST 请求参数）来配置。

{ 
    "css": "g.highcharts-series path {stroke-width:2;stroke: pink}", 
    "js": "document.body.style.webkitTransform = \"rotate(-10deg)\";" 
}

关于上面的参数使用可以参考我们提供的 导出服务测试页面