您的位置:首页 > 运维架构

Flash图表组件 Open Flash Chart

2011-04-11 18:54 393 查看
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

02
    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
04
<
head
>
05
    
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
06
    
<
title
>OFC-helloworld</
title
>
07
    
<!--导入SWFObject.js-->
08
    
<
script
type
=
"text/javascript"
src
=
"js/swfobject.js"
></
script
>
09
    
<
script
type
=
"text/javascript"
>
10
    
var flashvars = {};
11
    
var params = {menu:"false",scale:"noScale",wmode:"opaque"};
12
    
swfobject.embedSWF("open-flash-chart.swf","helloworld","550px","350px", 
13
        
"9.0.0","http://www.flexrain.cn/js/expressInstall.swf",flashvars,params);
14
    
</
script
>
15
</
head
>
16
<
body
>
17
    
<
h3
>HelloWorld</
h3
>
18
    
<
div
id
=
"helloworld"
></
div
>
19
</
body
>
20
</
html
>

[代码]第二种方法:原始的object标签

view source

print?

01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
02
    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
04
<
head
>
05
  
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
06
  
<
title
>OFC-helloworld</
title
>
07
</
head
>
08
<
body
>
09
  
<
div
>
10
    
<
object
classid
=
"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width
=
"550"
height
=
"400"
id
=
"myofc"
>
11
      
<
param
name
=
"movie"
value
=
"open-flash-chart.swf"
/>
12
    
<!--[if !IE]>-->
13
    
<
object
type
=
"application/x-shockwave-flash"
data
=
"open-flash-chart.swf"
width
=
"550"
height
=
"400"
>
14
    
<!--<![endif]-->
15
    
<
a
href
=
"http://www.adobe.com/go/getflashplayer"
>
16
      
<
img
src
=
"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
 
17
         
alt
=
"Get Adobe Flash player"
/>
18
    
</
a
>
19
    
<!--[if !IE]>-->
20
    
</
object
>
21
    
<!--<![endif]-->
22
    
</
object
>
23
  
</
div
>
24
</
body
>
25
</
html
>

[代码]data-files/data1.txt

view source

print?

01
{
02
"elements": [
03
{
04
 
"type": "area_hollow",
05
 
"fill-alpha": 0.4,
06
 
"values": [
07
 
{
08
 
"value": 100,
09
 
"colour": "#D02020",
10
 
"tip": "September 2009 Search Rank<br>Rank 100 // 100"
11
 
}
12
],
13
 
"width": 2,
14
 
"dot-size": 4,
15
 
"halo-size": 2,
16
 
"colour": "#ff9900",
17
 
"fill": "#dbecf6"
18
}
19
],
20
 
"bg_colour": "#ffffff",
21
 
"x_axis": {
22
 
"colour": "#aaaaaa",
23
 
"grid-colour": "#eeeeee",
24
 
"stroke": 1,
25
 
"tick-height": 4,
26
 
"size":12,
27
 
"labels": {
28
 
"labels": [
29
 
"一月"
30
 
]
31
 
}
32
 
},
33
 
"y_axis": {
34
 
"colour": "#aaaaaa",
35
 
"grid-colour": "#eeeeee",
36
 
"stroke": 1,
37
 
"tick-length": 5,
38
 
"min": 0,
39
 
"max": 105,
40
 
"steps": 50
41
 
},
42
 
"tooltip": {
43
 
"stroke": 1,
44
 
"colour": "#000000",
45
 
"background": "#fffbca"
46
 
}
47
}

[代码]使用方法

view source

print?

1
<script type=
"text/javascript"
>
2
   
var
flashvars = {
"data-file"
:
"data-files/data1.txt"
};
//这里是数据源
3
   
var
params = {menu:
"false"
,scale:
"noScale"
,wmode:
"opaque"
};
4
   
swfobject.embedSWF(
"open-flash-chart.swf"
,
"helloworld"
,
"550px"
,
"350px"
5
       
"9.0.0"
,
"http://www.flexrain.cn/js/expressInstall.swf"
,flashvars,params); 
6
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息