highcharts报表插件之expoting参数的使用
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参数的使用的更多相关文章
- highcharts js报表工具(报表插件)
highcharts报表工具(报表插件.图表工具) highcharts效果在线演示(可查看源代码): http://www.hcharts.cn/demo/index.php?p=56 Highc ...
- jquery报表插件收藏 MARK
Highcharts http://www.hcharts.cn/ 统计报表插件 jquery ui官网 http://jqueryui.com/selectmenu/#custom_render
- 挖到一款免费好用的web报表插件
最近公司项目需要用到报表,公司领导要求我来调研下报表工具.开始的时候了解了目前市场上功能强大,占有率高的两款报表工具,帆软报表和润乾报表,这两款报表工具功能比较强大,覆盖的行业较广,基本能满足所有的报 ...
- 安装VS2010水晶报表插件
Visual Studio 2010默认不带水晶报表,需要安装一个水晶报表插件,首先下载此插件: http://downloads.businessobjects.com/akdlm/cr4vs201 ...
- MyBean通用报表插件介绍
特性: 1.基于MyBean插件平台.可以在任何插件中无缝调用显示. 2.其他窗体中无需引用报表控件.就可以拥有报表的设计预览打印等功能. 3.甚至可以不用带包,制作报表插件,也就是说你可以将RM的报 ...
- Reporting Services报表常用的URL参数
http://blog.sina.com.cn/s/blog_5ef7acf5010118a5.html Reporting Services报表常用的URL参数 (2012-03-01 20:57: ...
- VS2010中水晶报表插件下载安装方法
Visual Studio 2010默认不带水晶报表,需要安装一个水晶报表插件,首先下载此插件: http://downloads.businessobjects.com/akdlm/cr4vs201 ...
- HighCharts 图表插件 自定义绑定 时间轴数据
HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...
- EChart报表插件使用笔记(1)
报表插件Echart java类 package com.spring.controller; import java.io.IOException; import java.util.Arrays; ...
随机推荐
- 【Django】Django 如何支持 分组查询、统计?
代码: from django.db.models import Sum alarm_sum_group_items = models.FILE_PROTECT_ALARM.objects.filte ...
- eclipse内存设置,tomcat内存设置,查看内存大小
首先可以通过java/jdk/bin下的java visualVM查看eclipse的内存大小和tomcat的内存大小,主要看堆,PermGen两个大小 如图: 多数情况下,eclipse抛出内存溢出 ...
- iOS 网络请求中的challenge
这里有一篇文章,请阅读,感谢作者!http://blog.csdn.net/kmyhy/article/details/7733619 当请求的网站有安全认证问题时,都需要通过 [[challenge ...
- Java与数据库类型对照表
数据库类型 Java类型 INTEGER int or java.lang.Integer BIGINT long or java.lang.Long SMALLINT short o ...
- [Android Pro] Android 打包流程
Android 打包流程: 官网地址:http://developer.android.com/tools/building/index.html 具体的打包步骤如下: 1:生成R.java类文件:E ...
- 重命名nginx服务器
为了防止被黑客扫描到web服务器信息,通过相对应的web服务器信息找出对应的版本漏洞,从而对web服务器进行入侵,nginx虽然功能强大,但是也是软件,软件就可能会有漏洞,例如nginx-0.6.32 ...
- 一、HTML和CSS基础--HTML+CSS基础课程--第3部分
第五章 CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式cs ...
- 《Java程序性能优化》学习笔记 程序优化
这一部分主要介绍代码层的优化.了解如何编写高效而精炼的代码,正确的使用函数方法.1.字符串优化处理Java语言中,String对象可以认为是对char数组的眼神和进一步封装.它主要由3部分组成:cha ...
- web页面自适应手机屏幕宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
- Android开发方向
运行Android平台的硬件只是手机.平台电脑等便携式设备,这些设备的计算能力.数据存储能力都是有限的, 不太可能在Android平台上部署大型企业级应用,因此Android应用可能以纯粹客户端应用的 ...