【HighCharts系列教程】七、导出属性——exporting
一、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的更多相关文章
- CRL快速开发框架系列教程十(导出对象结构)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- CRL快速开发框架系列教程七(使用事务)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- ASP.NET 5系列教程(七)完结篇-解读代码
在本文中,我们将一起查看TodoController 类代码. [Route] 属性定义了Controller的URL 模板: [Route("api/[controller]") ...
- （转）NGUI系列教程七（序列帧动画UITexture 和 UIsprit）
NGUI系列教程七(序列帧动画) 今天我给大家讲一下如何使用NGUI做序列帧动画.本节主要包括两方面内容,分别是使用UIspirit和使用UITexture 做序列帧动画.废话不说了,下面开始.还 ...
- 黄聪：Microsoft Enterprise Library 5.0 系列教程(七) Exception Handling Application Block
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(七) Exception Handling Application Block 使用企业库异常处理应用程序模块的 ...
- Spring Boot 系列教程18-itext导出pdf下载
Java操作pdf框架 iText是一个能够快速产生PDF文件的java类库.iText的java类对于那些要产生包含文本,表格,图形的只读文档是很有用的.它的类库尤其与java Servlet有很好 ...
- webpack4 系列教程(七): SCSS提取和懒加载
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懒加载. 个人技术小站: https://god ...
- 【转】PyQt5系列教程(七)控件
PyQt5系列教程(七)控件 软硬件环境 Windows 10 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.4 前言 控件是PyQt应用程序的基石.PyQt5自带很多不 ...
- 【HighCharts系列教程】九、语言属性——Lang
一.lang属性说明 Lang属性主要用于配置显示的文字等语言相关属性. 主要可配置如下内容:小数点符号.导出相关文字.月份文字.星期文字等 lang属性不重要,无特殊情况,不用配置. 二.lang属 ...
随机推荐
- React和动态网站接口的经济学
来自: React and the economics of dynamic web interfaces 自从2000开始我就一直在做web开发,曾见过很多以各种库和框架的起起落落,这些库和框架作为 ...
- tcpdump抓取HTTP包【转载】
tcpdump -XvvennSs 0 -i eth0 tcp[20:2]=0x4745 or tcp[20:2]=0x4854 0x4745 为"GET"前两个字母"G ...
- Spring 实例化bean的三种方式：
方法一:使用构造器实例化bean java代码: package com.model; public class User { private String username; public User ...
- linux下MMC/SD/SDIO驱动系列之二 ---- host注册过程（一）
参考了 http://blog.csdn.net/xieweihua2012/article/details/12844733 在他的基础上更详细的解析源 ...................... ...
- libevent在windows下使用步骤详解
一 环境 官方下载地址:http://libevent.org/版本:libevent-2.0.22-stable 二 编译静态库 1 解压把上面下载到libevent-2.0.22-stable.t ...
- 我眼中的C#3.0 摘自于网络：http://www.cnblogs.com/joinger/articles/1297237.html
每次有新技术发布时,我们总能感受到两种截然不同的情绪: 一种是恐惧和抵抗,伴随着这种情绪的还有诸如"C# 2.0用的挺好的,为什么要在C# 3.0搞到那么复杂?"或者"我 ...
- mysql 连接两列
以下划线符号,连接两列,作为查询结果: SELECT CONCAT(col_1,'_',col_2) FROM yourtable
- php 数据库并发处理
在并行系统中并发问题永远不可忽视.尽管PHP语言原生没有提供多线程机制,那并不意味着所有的操作都是线程安全的.尤其是在操作诸如订单.支付等业务系统中,更需要注意操作数据库的并发问题. 接下来我通过一个 ...
- OpenGL—Android 开机动画源码分析一
.1 Android开机动画实现方式目前实现Android开机动画的方式主要是逐帧动画和OpenGL动画. ?逐帧动画 逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的 ...
- Tomcat服务器
常见的web服务器 1. WebLogic是BEA公司的产品,是目前应用最广泛的web服务器,支持J2EE规范(J2EE里有13种技术),商业产品,收费的.银行,证券等对并发,安全要求高的时候用,一般 ...