highcharts报表插件之expoting参数的使用

标签：style   blog   http   color   使用   strong   

exporting 参数配置

本文转载自：http://blog.csdn.net/myjlvzlp/article/details/8531275

说明：导出及打印选项

打印导出功能的配置项。

1、buttons:打印和导出按钮设置。其中两个按钮中又有很多样式的设置，具体如下：

  (1)exportButton:导出按钮样式

       (1)hoverSymbolFill:鼠标移上去改变按钮箭头的颜色，String型，默认值为#768F3E.

       (2)onclick:点击报表导出按钮事件一般和menuItems同时使用。

       (3)menuItems:点击导出按钮的时候出现的下拉列表的设置选项，一般和onclick同时使用，Array类型。

       实例1如下：

exporting : {  
        enabled : true,  
        buttons : {  
               exportButton : {  
                      menuItems: null,  
                      onclick: function(){  
                             this.exportChart();  
                      }  
               },  
               printButton: {  
                      enabled : false  
               }  
        }  
 }  

       点击时就不会出现下拉框了，而是直接导出报表图片。

       实例2如下：

exporting : {  
       enabled : true,  
       buttons : {  
              exportButton : {  
                     menuItems: [{  
                            text: ‘导出PNG图片(宽度为250px)‘,  
                            onclick:function() {  
                                   this.exportChart({  
                                          width:200 //导出报表的宽度  
                                   });  
                            }  
                     }, {  
                            text: ‘导出PNG图片(宽度为800px)‘,  
                            onclick:function() {  
                                   this.exportChart();// 800px by default  
                            }  
                     },  
                     null,  
                     null  
                     ]  
              },  
              printButton: {  
                     enabled : false  
              }  
       }  
}  

       点击时出现自己设置的下拉标题以及导出图片的大小。

       (4)symbol : 符号的按钮。点定义功能在Highcharts.Renderer.symbols集合。String类型，默认值为“exportIcon”。symbol的可选值有‘circle‘, ‘diamond‘,‘exportIcon‘, ‘printIcon‘,  ‘square‘, ‘triangle‘和‘triangle-down‘对应的图片如下所示：

      (5)symbolFill : symbol的背景色，String类型，默认值是#A8BF77

      (6)x : 相对于本身横向的位置，正负数都可以，Number类型，默认值是10

      (7)align: 在报表中的水平位置，String类型，可选值有"left"，"center"，"right"，默认是"right"

      (8)backgroundColor: 报表导出图片按钮的背景色设置，如：

backgroundColor:{  
        linearGradient:[0, 0, 0, 20],  
        stops:[  
               [0.1,‘#ff0000‘],  
               [0.9,‘#00ff00‘]  
        ]  
 }

      默认值为：

backgroundColor:{  
       linearGradient:[0, 0, 0, 20],  
       stops:[  
              [0.4,‘#F7F7F7‘],  
              [0.6,‘#E3E3E3‘]  
       ]  
}

       (9)borderColor: 报表导出按钮边框的颜色，String类型，默认值是#B0B0B0

       (10)borderRadius: 报表导出按钮边框四个对角的圆滑程度，Number类型，默认值是3

       (11)borderWidth: 报表导出按钮边框的宽度，Number类型，默认值是1

       (12)enabled: 报表导出按钮是否启用，Boolean类型，默认值是true

       (13)height: 报表导出按钮的高度，Number类型，默认值是20

       (14)hoverBorderColor: 鼠标经过报表导出按钮时边框的颜色，String类型，默认值是#909090

       (15)hoverSymbolStroke  : 鼠标经过报表导出按钮的中间那个箭头的边框颜色，String类型，默认值是#4572A5

       (16)symbolSize  : 报表导出按钮的中间那个箭头的大小尺寸，Number类型，默认值是12

       (17)symbolStroke  : 报表导出按钮的中间那个箭头的边框颜色，String类型，默认值是#A0A0A0

       (18)symbolStrokeWidth  : 报表导出按钮的中间那个箭头的边框宽度，Number类型，默认值是1

       (19)symbolX  : 报表导出按钮的中间那个箭头的横向位置，Number类型，默认值是11.5

       (20)symbolY  : 报表导出按钮的中间那个箭头的纵向位置，Number类型，默认值是10.5

       (21)verticalAlign  : 报表导出按钮的垂直对齐方式，String类型，可选项是"top", "middle" 或者 "bottom". 默认值是"top"

       (22)width  : 报表导出按钮的宽度，Number类型，默认值是24

       (23)y  : 相对于本身纵向的位置，正负数都可以，Number类型，默认值是10

   (2)printButton:打印按钮样式

       (1)hoverSymbolFill:鼠标移上去改变按钮箭头的颜色，String型，默认值为#768F3E.

       (2)onclick:点击报表打印按钮事件一般和menuItems同时使用。

       (3)menuItems:点击打印按钮的时候出现的下拉列表的设置选项，一般和onclick同时使用，Array类型。

       实例1如下：

exporting: {  
      enabled: true,  
      buttons: {  
             exportButton: {  
                    menuItems:null,  
                    onclick:function() {  
                           this.exportChart();  
                    }  
             },  
             printButton:{  
                    enabled: false  
             }  
      } 

       点击时就不会出现下拉框了，而是直接导出报表图片。

       实例2如下：

exporting: {  
       enabled: true,  
       buttons: {  
              exportButton: {  
                     menuItems:[{  
                            text:‘导出PNG图片(宽度为250px)‘,  
                            onclick:function() {  
                                   this.exportChart({  
                                          width:200 //导出报表的宽度  
                                   });  
                            }  
                     },{  
                            text:‘导出PNG图片(宽度为800px)‘,  
                            onclick:function() {  
                                   this.exportChart();// 800px by default  
                            }  
                     },  
                     null,  
                     null  
                     ]  
              },  
              printButton:{  
                     enabled: false  
              }  
       }  
}  

       点击时出现自己设置的下拉标题以及导出图片的大小。

       (4)symbol: 符号的按钮。点定义功能在Highcharts.Renderer.symbols集合。String类型，默认为“exportIcon”。symbol的可选值有‘circle‘, ‘diamond‘,‘exportIcon‘,‘printIcon‘,  ‘square‘, ‘triangle‘和‘triangle-down‘

       (5)symbolFill : symbol的背景色，String类型，默认值是#A8BF77

       (6)x : 相对于本身横向的位置，正负数都可以，Number类型，默认值是10

       (7)align : 在报表中的水平位置，String类型，可选值有"left"，"center"，"right"，默认是"right"

       (8)backgroundColor : 报表打印图片按钮的背景色设置，如：

backgroundColor: {  
       linearGradient: [0, 0, 0,20],  
       stops: [  
              [0.1, ‘#ff0000‘],  
              [0.9, ‘#00ff00‘]  
       ]  
} 

      默认值为：

backgroundColor: {  
       linearGradient: [0, 0, 0,20],  
       stops: [  
              [0.4, ‘#F7F7F7‘],  
              [0.6, ‘#E3E3E3‘]  
       ]  
} 

       (9)borderColor : 报表打印按钮边框的颜色，String类型，默认值是#B0B0B0

       (10)borderRadius : 报表打印按钮边框四个对角的圆滑程度，Number类型，默认值是3

       (11)borderWidth : 报表打印按钮边框的宽度，Number类型，默认值是1

       (12)enabled : 报表打印按钮是否启用，Boolean类型，默认值是true

       (13)height : 报表打印按钮的高度，Number类型，默认值是20

       (14)hoverBorderColor : 鼠标经过报表打印按钮时边框的颜色，String类型，默认值是#909090

       (15)hoverSymbolStroke  : 鼠标经过报表打印按钮的中间那个箭头的边框颜色，String类型，默认值是#4572A5

       (16)symbolSize  : 报表打印按钮的中间那个箭头的大小尺寸，Number类型，默认值是12

       (17)symbolStroke  : 报表打印按钮的中间那个箭头的边框颜色，String类型，默认值是#A0A0A0

       (18)symbolStrokeWidth  : 报表打印按钮的中间那个箭头的边框宽度，Number类型，默认值是1

       (19)symbolX  : 报表打印按钮的中间那个箭头的横向位置，Number类型，默认值是11.5

       (20)symbolY  : 报表打印按钮的中间那个箭头的纵向位置，Number类型，默认值是10.5

       (21)verticalAlign  : 报表打印按钮的垂直对齐方式，String类型，可选项是"top", "middle" 或者 "bottom". 默认值是"top"

       (22)width : 报表打印按钮的宽度，Number类型，默认值是24

       (23)y : 相对于本身纵向的位置，正负数都可以，Number类型，默认值是10

2、enabled:是否显示按钮（也就是启用打印导出功能），布尔型，默认显示true

3、filename:导出报表图片的文件名，String型,默认值chart，不支持中文名字的命名

4、type：如果chart.exportChart()调用时没有指定类型选项，默认的MIME类型。

      可能的值是image/png, image/jpeg, application/pdf andimage/svg+xml. 默认的值是"image/png".

5、url：转换图片的服务器url，默认是用免费网络服务器highcharts，默认值http://export.highcharts.com

6、width：导出PNG或JPG图片大小，数字型。默认值800

    注意：width和height的比值为2:1，设置width的时候，最好设置成200的倍数，不然设置成100或300等宽度时候，下载的时间会比较长。

highcharts报表插件之expoting参数的使用,布布扣,bubuko.com

highcharts报表插件之expoting参数的使用

标签：style   blog   http   color   使用   strong   

原文地址：http://www.cnblogs.com/dreammyle/p/3847495.html