首页 > 代码库 > 【HighCharts系列教程】七、导出属性——exporting

【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>

四、效果截图

技术分享

五、在线演示

演示地址:http://www.52wulian.org/test/HighCharts/highcharts_2_5_exporting.html

六、资源下载

下载地址:http://pan.baidu.com/share/link?shareid=244035&uk=3087605183

 

【HighCharts系列教程】七、导出属性——exporting