【HighCharts系列教程】七、导出属性——exporting
一、exporting属性说明
默认情况下，HighCharts支持将图表导出为图片或打印功能的。也就是在图表的右上角有两个按钮。打击即可进行相应的操作。
实现导出和打印功能需要引入相应的js文件，也就是exporting.js（该文件存在于highCharts压缩包的/js/modules目录下）。
一般情况下，我们基本用不上该功能（不引入exporting.js即可去掉该功能），即使是使用该功能，也不用配置，默认的配置就可以。
二、exporting属性详解
| 参数 | 说明 | 默认值 |
|---|---|---|
| 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>
|
四、效果截图
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
