HIGHCHARTS
  • 关于我们
    • 关于我们
    • 联系方式
    • 新闻动态
    • 合作伙伴
  • 在线商店
  • 在线实例
    • Highcharts 演示
    • Highcharts Stock 演示
    • Highcharts Maps 演示
    • Highcharts Gantt 演示
    • 图集new
    • 客户案例
  • 文档教程
    • 使用教程
    • API 文档
    • 兼容性
    • 常见错误
    • 更新日志
  • 服务与支持
    • 获取技术支持
    • 下载中心
    • 地图数据
    • 产品规划
  • 产品中心
    • Highcharts
    • Highcharts Stock
    • Highcharts Map
    • Highcharts iOS
    • Highcharts Android
    • JShare
    • 爱图说
    • Highcharts 云服务
    • Highcharts 编辑器
    • 插件扩展
    • 应用扩展
  • 博客
  • 技术社区
  • 快速上手
    • Highcharts 系列软件简介
    • 1 分钟上手 Highcharts
    • 文件下载与使用
    • 通过 npm 安装
    • 通过 Bower 安装
    • 如何设置图表配置选项
    • Highcharts 兼容性
    • Highcharts 使用协议
  • 基础教程
    • 图表主要组成
    • 图表配置
    • 标题
    • 坐标轴
    • 数据列
    • 颜色
    • 数据提示框
    • 图例
    • 版权信息
    • HTML标签
    • 标示线
    • 标示带
    • 图表缩放
    • 语言文字
    • 标签及字符串格式化
    • 钻取功能
    • 3D 图表
    • 响应式
  • 数据处理
    • 数据处理概述
    • 服务端动态渲染图表
    • Ajax 请求数据接口
    • 处理文本或文本数据文件
    • 数据功能模块
  • 图表类型
    • 图表类型
    • 直线图
    • 曲线图
    • 面积图及面积范围图
    • 柱状图和条形图
    • 饼图
    • 范围图
    • 散点图及气泡图
    • 漏斗图及金字塔图
    • 极地图
    • 瀑布图
    • 误差线图
    • 箱线图
  • 高级特性
    • 堆叠图
    • 自由绘图
    • 国际化
  • 图表导出模块
    • 图表导出模块概述
    • 客户端导出
    • 搭建导出服务器
    • 命令行导出
    • 导出 Excel 数据文件
  • 图表设计及样式
    • 图表设计及样式
    • 颜色
    • 主题
  • 插件扩展
    • 插件扩展概述
    • 创建插件
    • 提交插件到官方插件库
  • 地图(Highmaps)
    • 开始使用 Highmaps
    • 地图数据集
    • 经纬度
    • 地图导航器
  • 股票图(Highstock)
    • 开始使用 Highstock
    • 范围选择器
    • 导航器
    • 滚动条
    • K 线图
    • 技术指标
    • 自定义技术指标
  • 官方扩展包(Vue React Angular iOS Android .NET)
    • Highcharts .NET
    • Highcharts Vue
    • Highcharts React
    • Highcharts Angular
    • Highcharts iOS
    • Highcharts Android
收起菜单 教程目录

图表导出模块概述

最后修改时间:2022-12-15 18:33

图表导出模块是指提供了将网页中图表导出为常见的图片格式(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 请求参数)来配置。

参数参数解释
svgSVG 字符串,当指定了 options 参数是该参数将会被忽略
options图表配置
type导出文件的类型,可以是 'image/png'、'image/jpeg'、'application/pdf' 或 'image/svg+xml' 中的一个
filename导出文件名,默认是 “Chart”
scale基于原始 SVG 的缩放比例,当指定了 width 参数时,该参数失效。我们提供的服务器允许的最大值是 4,因为缩放过大会导致响应慢
width指定导出图片的具体大小,我们提供的服务器允许的最大值是 2000px
constr构造函数名字,即生成图表的类型,可以是 “Chart”、“StockChart” 或 “Map”,只有指定了 options 参数是才有效
callback回调函数,该函数会在图表执行完毕后执行
resources额外的 CSS 和 JS 代码,该参数的值是包含 js 和 css 属性的对象经过 JSON.stringify 后的字符串
{ 
    "css": "g.highcharts-series path {stroke-width:2;stroke: pink}", 
    "js": "document.body.style.webkitTransform = \"rotate(-10deg)\";" 
}
async布尔类型,默认是 false,当设置为 true 是,返回的结果是图片路径,该文件路径在 30s 内有效(超时将会被删除),具体请参考 例子

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

版权声明

本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。

标题:图表导出模块概述 | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/export-module-overview/

   上一篇 下一篇   
  目录
    简数科技微信,同步更新Highcharts教程

    订阅更新

    © 2022 Highcharts 中文官网, 由 简数科技 提供服务, 浙ICP备16004892号-6, 浙公网安备33011002011664号
    在线客服

    选择服务类型

    技术问题

    • 技术社区
    • 技术支持
    • Q Q 群

    商业授权

    • 使用协议
    • 购买授权
    • 申请试用
    • 授权查询

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

    服务热线:0571 - 8620 8605 / 181 0659 5564    邮件:sales@jianshukeji.com

    服务时间:工作日 9:00 ~ 18:00    紧急服务 :7 x 24 响应(仅限电话)

    重要通知!

    尊敬的用户您好:
    由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:

    网站或服务名称域名替代的网站
    主站www.highcharts.com.cnwww.hcharts.cn
    静态资源服务/CDNcdn.highcharts.com.cn
    code.highcharts.com.cn
    code.hcharts.cn
    img.highcharts.com.cnimg.hcharts.cn
    API 文档api.highcharts.com.cnapi.hcharts.cn
    导出服务export.highcharts.com.cnexport.hcharts.cn

    以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。

    如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。

    如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。

    简数科技 2022-12-22