大家好,又见面了,我是你们的朋友全栈君。
一、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 |
三、实例说明
代码语言:javascript复制<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
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/167038.html原文链接:https://javaforall.cn