一、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>
四、效果截图
五、在线演示
演示地址：http://www.52wulian.org/test/HighCharts/highcharts_2_5_exporting.html
六、资源下载
下载地址：http://pan.baidu.com/share/link?shareid=244035&uk=3087605183
时间： 2024-11-05 18:51:16