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

时间:2023-03-09 13:21:19
highcharts报表插件之expoting参数的使用

exporting 参数配置

本文转载自:http://blog.****.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'对应的图片如下所示:

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

(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等宽度时候,下载的时间会比较长。