Open Flash Chart [ofc]图表示例

于 2016-11-10 14:48:46 发布
阅读量906 收藏 1
点赞数
分类专栏： JS FLASH HTML ASP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cncco/article/details/53115621
版权
ASP 同时被 3 个专栏收录
54 篇文章 0 订阅
订阅专栏
JS
37 篇文章 0 订阅
订阅专栏
HTML
35 篇文章 0 订阅
订阅专栏

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", "240", "160",
	"9.0.0", "expressInstall.swf",{"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,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", "240", "160",
	"9.0.0", "expressInstall.swf",{"get-data":"getChartData3",
		  "id":"chart3",
		  "save_image_message":"把图形保存为图片",
		  "loading":"正在加载中..."}
	  );

function getChartData3(){
	var jsonData ='{"title":{"text":"多条折线图(路面PCI、RQI图)","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#"},"values":[92.89,94.06,91.64,0,0],"on-show":{"type":"drop","cascade":1,"delay":0.5}},' + 
				  '		{"type":"line","alpha":0.7,"text":"RQI","colour":"#0000FF","dot-style":{"type":"solid-dot","tip":"#x_label#处RQI为#val#"},"values":[78.27,2.1,0.34,0,0],"on-show":{"type":"drop","cascade":1,"delay":0.5}}],' +  
				  '	"x_axis":{"stroke":1,"tick_height":10,"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;
} 

//demo4:饼图********************
swfobject.embedSWF("open-flash-chart.swf", "OpenFlashChartContainer4", "240", "160",
	"9.0.0", "expressInstall.swf",{"get-data":"getChartData4",
		  "id":"chart4",
		  "save_image_message":"把图形保存为图片",
		  "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":"饼图(作物比重图)","style":"font-size:12;font-weight:bold;"},' + 
					' "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", "240", "160",
	"9.0.0", "expressInstall.swf",{"get-data":"getChartData5",
		  "id":"chart5",
		  "save_image_message":"把图形保存为图片",
		  "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": "涵洞", "font-size": 12},' +
				  '    				{"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, "tip":"#x_label# #val# 座桥梁"},{"val":2, "tip":"#x_label# #val# 道涵洞"},{"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", "240", "160",
	"9.0.0", "expressInstall.swf",{"get-data":"getChartData6",
		  "id":"chart6",
		  "save_image_message":"把图形保存为图片",
		  "loading":"正在加载中..."}
	  );
	 
function getChartData6(){  
	var jsonData =' {"title":{"text":"柱状图(合格人数图)","style":"{font-size:12;font-weight:bold;text-align:center;}"},' + 
				  '	 "bg_colour":"#FFFFFF",'  +
				  '  "elements":[' +
                  '  	{"type":"bar" ,"alpha":0.7 ,"colour":"#0000FF" ,"text":"合格人数" ,"font-size":12 ,' + 
                  '			"values":[8,4] ,"tip":"合格人数#val#人"}],' +
                  '	 "x_axis":{"stroke":1 ,"tick_height":1 ,"colour":"#d000d0" ,"grid_colour":"#00ff00" ,' + 
                  '	 		   "labels":{"size":12,"labels":["小组1","小组2"]}},' +
                  '  "y_axis":{"stroke":2 ,"tick_length":1 ,"colour":"#d000d0" ,"grid_colour":"#00ff00" ,' + 
                  '	 "offset":0 ,"max":10}' + 
                  '	}';
	return jsonData;
}
  
//demo7:多个柱状图********************
swfobject.embedSWF("open-flash-chart.swf", "OpenFlashChartContainer7", "240", "160",
	"9.0.0", "expressInstall.swf",{"get-data":"getChartData7",
		  "id":"chart7",
		  "save_image_message":"把图形保存为图片",
		  "loading":"正在加载中..."}
	  );
	 
function getChartData7(){ 
	var jsonData=' {"title":{"text":"多个柱状图(调查意见图)","style":"{font-size:12;font-weight:bold;text-align:center;}"},' + 
				 '	"bg_colour":"#FFFFFF",' +
				 '	"elements":[' +
                 '		{"type":"bar" ,"alpha":0.5 ,"colour":"#0000FF" ,"text":"同意人数" ,"font-size":12 ,' + 
                 '			"values":[8,4] ,"tip":"同意人数#val#人"},' +
                 '		{"type":"bar" ,"alpha":0.5 ,"colour":"#008000" ,"text":"反对人数" ,"font-size":12 ,' + 
                 '			"values":[2,5] ,"tip":"反对人数#val#人"}],' +
                 '	"x_axis":{"stroke":2 ,"tick_height":2 ,"colour":"#d000d0" ,"grid_colour":"#00ff00" ,' + 
                 '			"labels":{"size":12,"labels":["部门1","部门2"]}},' +
                 '	"y_axis":{"stroke":2 ,"tick_length":2 ,"colour":"#d000d0" ,"grid_colour":"#00ff00" ,' + 
                 '			"offset":0 ,"max":10}' + 
                 ' }';
                 
	return jsonData;
} 	  

//demo8:横向柱状图********************
swfobject.embedSWF("open-flash-chart.swf", "OpenFlashChartContainer8", "240", "160",
	"9.0.0", "expressInstall.swf",{"get-data":"getChartData8",
		  "id":"chart8",
		  "save_image_message":"把图形保存为图片",
		  "loading":"正在加载中..."}
	  );
	 
function getChartData8(){  
	var jsonData=' {"title":{"text":"横向柱状图(合格图)","style":"{font-size:12;font-weight:bold;text-align:center;}"},' + 
				 '	"bg_colour":"#FFFFFF",' +
				 '	"elements":[' +
                 '		{"type":"hbar" ,"colour":"#0000FF" ,"text":"合格人数" ,"font-size":12 ,' + 
                 '			"values":[{"left":0,"right":8},{"left":0,"right":3}], "tip":"合格人数#right#人"},' +
                 ' 		{"type":"tags","font":"Cambria","font-size":12,"colour":"#000000","padding":0,' + 
				 '			"rotate":90,"align-x":"above","align-y":"center","text":"#y#",' + 
				 '			"values":[{"x":3,"y":0},{"x":8,"y":1}]}' +  
                 '	],' +
                 '	"y_axis":{"stroke":2 ,"tick_length":2 ,"colour":"#d000d0" ,"grid_colour":"#00ff00" ,' + 
                 '			  "offset":1,"labels":["小组1","小组2"]},' +
                 '	"x_axis":{"stroke":2 ,"tick_height":2 ,"colour":"#d000d0" ,"grid_colour":"#00ff00" ,' + 
                 '			  "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>


cncco
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Open Chart Flash [ofc]图表示例一 （附图）
03-21
NULL 博文链接：https://modiliany.iteye.com/blog/893846
OpenFlashChart使用
weixin_33698823的博客
10-06 165
最近在做的项目需要经常使用图表,在使用了MSchart之后发现例子少,而且极其难控制.在网上搜了一下,找到OpenFlashChart这个开源项目,发现效果还不错,而且例子满全的,效果也不错.官方下载地址:http://teethgrinder.co.uk/open-flash-chart/. 该控件的数据传输方式是采用了JSON,所以有个C#写得项目是用...
Open Flash Chart使用简记
竹叶青的专栏
11-09 3665
对于Open Flash Chart（以下简称OFC）不再作过多介绍，很多网络博客都对其作了相应介绍；这里只是记录一下自己最近几天折腾OFC一些不常用特性的经过，以免以后再次忘记，权作学习笔记。 1、获取OFC图表对象 由于下面很多地方都用到了页面嵌入的OFC对象，所以在此先定义一个获取该对象的方法： function findSWF(movieName) { var m
转：open flash chart（ofc）图表
哦嘛咪嘛咪哄~~~
09-24 198
     Java开源项目中制作图表比较出色的就是JFreeChart了，相信大家都听说过，它不仅可以做出非常漂亮的柱状图，饼状图，折线图基本图形之外，还能制作甘特图，仪表盘等图表。在Web应用中可以为项目增色不少。JFreeChart技术成熟，完全是通过Java代码控制图表生成，掌握难度不大。但是它的一个缺点就是所有资源在服务器端生成，需要占用大量的服务器资源，而且图表以流的形式输送到客户端也占...
open-flash-chart 与 FusionCharts 开发中使用
weixin_33755649的博客
11-13 119
open-flash-chart 这是一个开源的Flash报表组件,可以免费使用还可以修改源码,简称OFC 关于ofc版本: 目前open-flash-chart 最新的版本是2.0bate版.比较稳定的是1.9版. 1.9版本用actionscript2.0编写, 2.0用acrionscript3.0编写,Adobe Flex编译,并且2.0的支持Json传送数据. 下载open f...
Open Flash Chart使用
蓝猫的专栏
09-24 4067
最近项目中需要用图表展示数据，在网上找了个开源的组件Open Flash Chart 。利用Flash前端展现，支持多种图表，柱状图、饼图、线状图等。 1. 准备工作： (1) 下载OpenFlashChart组件 下载最新2.x版本，解压缩后将open-flash-cha
Open Flash Chart的应用(java)，就是很炫的报表了
09-15
这里面有两个java代码工程和 Open Flash Chart API。工程都是调试过的直接导入可用，代码都有详细的注释，如果你真是想用到报表之类的东西，肯定很不错了。 工程所需的jar 包 js文件都有，基本上很全。 第一步：...
flash图表组件Open Flash Chart 2.0+(asp/php)自动提取示例+使用说明
08-23
本实例在IE6、IE7、IE8、Chrome、Firefox测试通过，在实际项目使用中，对可能出现的问题，尤其在IE6中无法显示flash图表，本人特撰写《Flash图表组件——使用Open Flash Chart 2.0的一些问题及解决办法》，具体访问...
Open Flash Chart 教程
06-19
包含一些页面和demo。各类常用图形的简单实现例子。
Open Flash Chart
09-08
Open Flash Chart 1 简介 2准备工作 3主要配置项 4 jsp页面 5中文使用参数对照表
OpenFlashChart实例 + 详细讲解
08-25
OpenFlashChart实例 + 详细讲解
OpenFlashChart .NET图表控件附示例包
03-16
内容索引:.NET源码,控件组件,OpenFlashChart,图表,控件　　OpenFlashChart是一款开源免费的图表组件，同时结合了flash和Javascript技术，可以创建一些具有动感效果的报表分析图表，而且它还能够很好的与浏览器进行集成。压缩包中含有一个使用此控件的示例程序，帮助您更好的理解它的使用。 　　 　　
OFC图表使用说明文档
03-24
OFC图表使用说明文档 对于open flash chart 的一些参数的详细说明
open-flash-chart
03-01
NULL 博文链接：https://moyuan.iteye.com/blog/263979
OFC学习笔记（一） --- .Net WinForm环境下制作Open Flash Chart
luols的专栏
02-15 4765
<br />Open Flash Chart是一个开源的Flash图表制作工具，基本都是在Web环境下进行制作，网上资料也相对较少，其官网http://teethgrinder.co.uk/open-flash-chart/提供的资料并没有在WinForm下操作，而且其数据文件大都是以php文件给出，与.Net相关例子并不多，因此这两天自己在WinForm下借助WebBrowser展现Flash Chart，赶紧记录下制作过程：<br />制作Open Flash Chart一般需要有两个文件：HTML页面
openflashchart
08-15
open flash chart的所有图形的josn数据，可以直接使用，根据个人喜好可以自己修改。
openxr的官方文档和示例代码
最新发布
01-01
OpenXR是一种开放式、跨平台的VR/AR开发框架，...总而言之，OpenXR的官方文档和示例代码对于开发者来说是非常宝贵的资源，能够帮助他们更快地掌握OpenXR的开发技能，从而更高效地开发出优质的虚拟现实和增强现实应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值