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

来源：互联网发布：淘宝店卖家中心在哪编辑：程序博客网时间：2024/06/06 03:06

http://www.52wulian.org/highcharts_2_5_exporting/

一、exporting属性说明

默认情况下，HighCharts支持将图表导出为图片或打印功能的。也就是在图表的右上角有两个按钮。打击即可进行相应的操作。

实现导出和打印功能需要引入相应的js文件，也就是exporting.js（该文件存在于highCharts压缩包的/js/modules目录下）。

一般情况下，我们基本用不上该功能（不引入exporting.js即可去掉该功能），即使是使用该功能，也不用配置，默认的配置就可以。

二、exporting属性详解

参数说明默认值

buttons：{

exportButton：{…},

printButton:{…}

}

按钮属性，包括导出按钮（exportButton）及打印按钮（printButton）。

可配置相应按钮中具体的属性来改变按钮的大小、样式等

enabled是否使用该功能，当我false时，则图表没有导出及打印功能truefilename导出图片文件的文件名，不包含后缀charttype导出图的类型，有image/png, image/jpeg, application/pdf可选image/png.url导出功能的服务器地址，导出功能需要相应的服务提供支持。你可以自己搭建服务器，在/exporting-server目录下有相应的源文件http://export.highcharts.comwidth导出图片文件的宽度，相应的，高度这按照比例800.0

三、实例说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
    <head>
        <metahttp-equiv="content-type"content="text/html; charset=UTF-8">
        <scripttype="text/javascript"src="js/jquery.min.js"></script>
        <scripttype="text/javascript">
            $(function(){
            varchart;
            $(document).ready(function(){
                chart=newHighcharts.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>
        <scriptsrc="js/highcharts.js"></script>
        <scriptsrc="js/exporting.js"></script>
        <divid="container"style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

四、效果截图

highcharts_2_5_exporting

五、在线演示

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

六、资源下载

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

0 2