【HighCharts系列教程】七、导出属性——exporting
默认情况下,HighCharts支持将图表导出为图片或打印功能的。也就是在图表的右上角有两个按钮。打击即可进行相应的操作。
实现导出和打印功能需要引入相应的js文件,也就是exporting.js(该文件存在于highCharts压缩包的/js/modules目录下)。
一般情况下,我们基本用不上该功能(不引入exporting.js即可去掉该功能),即使是使用该功能,也不用配置,默认的配置就可以。
参数 | 说明 | 默认值 |
---|---|---|
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 |
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>
<meta
http-equiv
=
"content-type"
content
=
"text/html; charset=UTF-8"
>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="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>
<scriptsrc="js/highcharts.js"></script>
<scriptsrc="js/exporting.js"></script>
<div
id
=
"container"
style
=
"min-width: 400px; height: 400px; margin: 0 auto"
>
</div>
</body>
</html>
|