Open Flash Chart 图表组件
下载:http://teethgrinder.co.uk/open-flash-chart/
data-files里是各种实例文件,调用即可预览。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ofc2</title>
<script type="text/javascript" src=\'#\'" /script>
</head>
<body>
<p><strong>例子:</strong></p><div id="my_chart"></div>
<script type="text/javascript">
//swfobject.embedSWF("open-flash-chart.swf", "my_chart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"data.txt"} );
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"data.asp"} );
</script>
</body>
</html>
data.txt
{
"y_legend":{
"text":"Timeofday",
"style":"{color:#736AFF;}"
},
"elements":[
{
"type":"line",
"colour":"#736AFF",
"text":"Avg.waveheight(cm)",
"font-size":10,
"width":2,
"dot-size":4,
"halo-size":0,
"values":
[1.5,1.69,1.88,2.06,2.21,2.34,2.43,2.48,2.49,2.47,2.40,2.30,2.17,2.01,1.83,1.64,1.44,1.24,1.05,0.88,0.74,0.62,0.54,0.50,0.50,0.54,0.61,0.72,0.86,1.03,1.22,1.41,1.61,1.81,1.99,2.15,2.29,2.39,2.46,2.49,2.48,{"value":2.44,"colour":"#FF0000","tip":"monkies"},2.35,2.23,2.08]
}
],
"x_axis":{
"labels":{
"rotate":"vertical",
"labels":["2:00am","2:10","2:20","2:30","2:40","2:50",
"3:00am","3:10","3:20","3:30","3:40","3:50",
"4:00am","4:10","4:20","4:30","4:40","4:50",
"5:00am","5:10","5:20","5:30","5:40","5:50",
"6:00am","6:10","6:20","6:30","6:40","6:50",
"7:00am","7:10","7:20","7:30","7:40","7:50",
"8:00am","8:10","8:20","8:30","8:40","8:50",
"9:00am","9:10","9:20"]
}
},
"y_axis":{
"max":3
}}
data.asp
<%
data="{"&Chr(10)
data=data&"""y_legend"":{"&Chr(10)
data=data&"""text"":""Timeofday"","&Chr(10)
data=data&"""style"":""{color:#736AFF;}"""&Chr(10)
data=data&"},"&Chr(10)
data=data&"""elements"":["&Chr(10)
data=data&"{"&Chr(10)
data=data&"""type"":""line"","&Chr(10)
data=data&"""colour"":""#736AFF"","&Chr(10)
data=data&"""text"":""Avg.waveheight(cm)"","&Chr(10)
data=data&"""font-size"":10,"&Chr(10)
data=data&"""width"":2,"&Chr(10)
data=data&"""dot-size"":4,"&Chr(10)
data=data&"""halo-size"":0,"&Chr(10)
data=data&"""values"":"&Chr(10)
data=data&"[1.5,1.69,1.88,2.06,2.21,2.34,2.43,2.48,2.49,2.47,2.40,2.30,2.17,2.01,1.83,1.64,1.44,1.24,1.05,0.88,0.74,0.62,0.54,0.50,0.50,0.54,0.61,0.72,0.86,1.03,1.22,1.41,1.61,1.81,1.99,2.15,2.29,2.39,2.46,2.49,2.48,{""value"":2.44,""colour"":""#FF0000"",""tip"":""monkies""},2.35,2.23,2.08]"&Chr(10)
data=data&"}"&Chr(10)
data=data&"],"&Chr(10)
data=data&"""x_axis"":{"&Chr(10)
data=data&"""labels"":{"&Chr(10)
data=data&"""rotate"":""vertical"","&Chr(10)
data=data&"""labels"":[""2:00am"",""2:10"",""2:20"",""2:30"",""2:40"",""2:50"","&Chr(10)
data=data&"""3:00am"",""3:10"",""3:20"",""3:30"",""3:40"",""3:50"","&Chr(10)
data=data&"""4:00am"",""4:10"",""4:20"",""4:30"",""4:40"",""4:50"","&Chr(10)
data=data&"""5:00am"",""5:10"",""5:20"",""5:30"",""5:40"",""5:50"","&Chr(10)
data=data&"""6:00am"",""6:10"",""6:20"",""6:30"",""6:40"",""6:50"","&Chr(10)
data=data&"""7:00am"",""7:10"",""7:20"",""7:30"",""7:40"",""7:50"","&Chr(10)
data=data&"""8:00am"",""8:10"",""8:20"",""8:30"",""8:40"",""8:50"","&Chr(10)
data=data&"""9:00am"",""9:10"",""9:20""]"&Chr(10)
data=data&"}"&Chr(10)
data=data&"},"&Chr(10)
data=data&"""y_axis"":{"&Chr(10)
data=data&"""max"":3"&Chr(10)
data=data&"}}"
Response.Write data
%>
open flash chart 参数 详解
http://www.phpufo.com/?p=507