加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

Open Flash Chart [ofc]图表示例

发布时间：2020-12-15 19:59:01 所属栏目：百科 来源：网络整理
导读：Open Flash Chart的用法，JSP的例子，其它语言也差不多。 %@ page contentType="text/html; charset=GBK"% htmlheadmeta http-equiv="Content-Type" content="text/html; charset=GBK"meta HTTP-EQUIV="expires" CONTENT="0"meta HTTP-EQUIV="Pragma" CONTEN

Open Flash Chart的用法，JSP的例子，其它语言也差不多。

<%@ page contentType="text/html; charset=GBK"%> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta HTTP-EQUIV="expires" CONTENT="0">
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title></title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">

 /*
  *Open Chart Flash图表示例1
  *@author: modiliany
  *@2011-01-24
  */
//demo1:单条折线图（加载txt文件）*************
//expressInstall.swf:flashplayer检查程序，作用是如果没有浏览器flash插件，则提示安装
swfobject.embedSWF("open-flash-chart.swf","OpenFlashChartContainer1","240","160","9.0.0","expressInstall.swf",{"data-file":"data.txt"});


//demo2:单条折线图********************
swfobject.embedSWF("open-flash-chart.swf","OpenFlashChartContainer2",{"get-data":"getChartData2","id":"chart2","save_image_message":"把图形保存为图片","loading":"正在加载中..."}
	  );

function getChartData2(){
	var jsonData ='{"title":{"text":"单条折线图(路面PCI图)","style":"font-size:12;font-weight:bold;"},' +
				  ' "elements":[' + 
				  '		{"type":"line","alpha":0.7,"text":"PCI","colour":"#FF0000",' + 
				  '		 "dot-style":{"type":"solid-dot","tip":"#x_label#处PCI为#val#"},' +
				  '		 "on-show":{"type":"drop","cascade":1,"delay":0.5},' + 
				  '		 "values":[92.89,94.06,91.64,0]}],' +
				  ' "x_axis":{"stroke":2,"tick_height":2,"colour":"#d000d0","grid_colour":"#00ff00","offset":1,"labels":{"rotate":315,"siz":11,"labels":["K001","K002","K003","K004","K005"],"size":12}},' + 
				  ' "y_axis":{"max":100,"steps":10,"offset":1}' + 
				  '}';
	return jsonData;
} 


//demo3:多条折线图********************
swfobject.embedSWF("open-flash-chart.swf","OpenFlashChartContainer3",{"get-data":"getChartData3","id":"chart3","loading":"正在加载中..."}
	  );

function getChartData3(){
	var jsonData ='{"title":{"text":"多条折线图(路面PCI、RQI图)",' + 
				  '	"elements":[' + 
				  '		{"type":"line","dot-style":{"type":"solid-dot","values":[92.89,0],"on-show":{"type":"drop","delay":0.5}},' + 
				  '		{"type":"line","text":"RQI","colour":"#0000FF","tip":"#x_label#处RQI为#val#"},"values":[78.27,2.1,0.34,"delay":0.5}}],' +  
				  '	"x_axis":{"stroke":1,"tick_height":10,' + 
				  '	"y_axis":{"max":100,"offset":1}' +
				  '}';
	return jsonData;
} 

//demo4:饼图********************
swfobject.embedSWF("open-flash-chart.swf","OpenFlashChartContainer4",{"get-data":"getChartData4","id":"chart4","loading":"正在加载中..."}
	  );
	  
function getChartData4(){
	var valueStr='';
	var per='';
	var i =0;
	for(i=1; i<=5; i++){ 
		valueStr += '{"value":' + i +',"label":"占:';
		var percent = (i/15.0)*100 + '';
		if(percent.indexOf('.')!=-1){
			percent = percent.substring(0,percent.indexOf('.') + 3);
		}
		
		valueStr += percent + '%","tip":"作物' + i + ':' + i + '斤 "},';
	}  
	
	valueStr = valueStr.substring(0,valueStr.length-1); 
	var jsonData = 	'{"title":{"text":"饼图(作物比重图)",' + 
					' "elements":[{"font-size":11,"animate":"pie",' + 
					'	"colours":["#1C9E05","#FF368D","#FF0000","#0000FF","#008000"],' + 
					'	"type":"pie",' + 
					'	"values":['+valueStr+'],' + 
					'	"start-angle":180,' + 
					' "gradient-fill":true,' + 
					' "alpha":0.7}]' + 
					'}'; 
	return jsonData;
}

//demo5:堆积图********************
swfobject.embedSWF("open-flash-chart.swf","OpenFlashChartContainer5",{"get-data":"getChartData5","id":"chart5","loading":"正在加载中..."}
	  );
	  
function getChartData5(){
	var jsonData ='{"title":{"text":"堆积图(涵桥隧)","style":"{font-size:12;font-weight:bold;text-align:center;}"},' +
				  '	"bg_colour":"#FFFFFF",' + 
				  ' "elements":[{"type":"bar_stack","colours":["#0000FF","#008000","#FF0000"],' +
				  ' 			"keys": [' +
				  '    				{"colour":"#0000FF","text": "桥梁","font-size": 12},' +
				  '    				{"colour":"#008000","text": "涵洞",' +
				  '    				{"colour":"#FF0000","text": "隧道","font-size": 12}],' +
				  ' 			"tip":"#x_label# --- #val#<br>(total:#total#)",' +
				  ' 			"values": [' +
				  ' 				[{"val":1,"tip":"#x_label# #val# 座桥梁"},{"val":2,"tip":"#x_label# #val# 道涵洞"},{"val":3,"tip":"#x_label# #val# 座隧道"}],' + 
				  '     			[{"val":3,{"val":1,"tip":"#x_label# #val# 座隧道"}]]},' +
				  ' 			{"type":"tags","font":"Cambria","font-size":12,"colour":"#000000","padding":0,' + 
				  '					"rotate":0,"align-x":"center","align-y":"above","text":"#y#",' + 
				  '					"values":[{"x":0,"y":6},{"x":1,"y":6}]}' + 
				  '			],' + //end of "elements"
				  ' "x_axis":{"labels": {"labels": ["管理处一","管理处二"]},"stroke": 2,"tick-height": 2},' +
				  ' "y_axis":{"max": 10}}';
	return jsonData;
} 	

//demo6:柱状图********************
swfobject.embedSWF("open-flash-chart.swf","OpenFlashChartContainer6",{"get-data":"getChartData6","id":"chart6","loading":"正在加载中..."}
	  );
	 
function getChartData6(){  
	var jsonData =' {"title":{"text":"柱状图(合格人数图)",' + 
				  '	 "bg_colour":"#FFFFFF",'  +
				  '  "elements":[' +
                  '  	{"type":"bar","text":"合格人数",' + 
                  '			"values":[8,4],"tip":"合格人数#val#人"}],' +
                  '	 "x_axis":{"stroke":1,"tick_height":1,' + 
                  '	 		   "labels":{"size":12,"labels":["小组1","小组2"]}},' +
                  '  "y_axis":{"stroke":2,"tick_length":1,' + 
                  '	 "offset":0,"max":10}' + 
                  '	}';
	return jsonData;
}
  
//demo7:多个柱状图********************
swfobject.embedSWF("open-flash-chart.swf","OpenFlashChartContainer7",{"get-data":"getChartData7","id":"chart7","loading":"正在加载中..."}
	  );
	 
function getChartData7(){ 
	var jsonData=' {"title":{"text":"多个柱状图(调查意见图)",' + 
				 '	"bg_colour":"#FFFFFF",' +
				 '	"elements":[' +
                 '		{"type":"bar","alpha":0.5,"text":"同意人数",' + 
                 '			"values":[8,"tip":"同意人数#val#人"},' +
                 '		{"type":"bar","colour":"#008000","text":"反对人数",' + 
                 '			"values":[2,5],"tip":"反对人数#val#人"}],' +
                 '	"x_axis":{"stroke":2,' + 
                 '			"labels":{"size":12,"labels":["部门1","部门2"]}},' +
                 '	"y_axis":{"stroke":2,"tick_length":2,' + 
                 '			"offset":0,"max":10}' + 
                 ' }';
                 
	return jsonData;
} 	  

//demo8:横向柱状图********************
swfobject.embedSWF("open-flash-chart.swf","OpenFlashChartContainer8",{"get-data":"getChartData8","id":"chart8","loading":"正在加载中..."}
	  );
	 
function getChartData8(){  
	var jsonData=' {"title":{"text":"横向柱状图(合格图)",' +
				 '	"elements":[' +
                 '		{"type":"hbar",' + 
                 '			"values":[{"left":0,"right":8},{"left":0,"right":3}],"tip":"合格人数#right#人"},' +
                 ' 		{"type":"tags",' + 
				 '			"rotate":90,"align-x":"above","align-y":"center",' + 
				 '			"values":[{"x":3,"y":0},{"x":8,"y":1}]}' +  
                 '	],' + 
                 '			  "offset":1,"小组2"]},' + 
                 '			  "offset":0,"max":10}' + 
                 '	}';
                 
	return jsonData;
} 
</script>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" cellspacing=0 cellpading=0 border=0>
	<tr valign="top">
		<td align="center"> 
			 <table width="720px" height="480px" cellspacing=0 cellpading=0 border=1>
				 <tr>
					 <td colspan="3" style="background-color:#cccccc">
					 	Open Chart Flash图表示例1:
					 </td>
				 </tr>
				 <tr>
					 <td width="33%">
					 	 <div id="OpenFlashChartContainer1"></div>
					 </td>
					 <td width="33%">
					 	 <div id="OpenFlashChartContainer2"></div>
					 </td>
					 <td width="33%">
					 	 <div id="OpenFlashChartContainer3"></div>
					 </td>
				 </tr>
				 <tr>
					 <td width="33%">
					 	 <div id="OpenFlashChartContainer4"></div>
					 </td>
					 <td width="33%">
					 	 <div id="OpenFlashChartContainer5"></div>
					 </td>
					 <td width="33%">
					 	 <div id="OpenFlashChartContainer6"></div>
					 </td>
				 </tr>
				 <tr>
					 <td width="33%">
					 	 <div id="OpenFlashChartContainer7"></div>
					 </td>
					 <td width="33%">
					 	 <div id="OpenFlashChartContainer8"></div>
					 </td>
					 <td width="33%">
					 	 <div id="OpenFlashChartContainer9"></div>
					 </td>
				 </tr>
			 </table>
		 </td>
	</tr>
</table> 
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同