modiliany
- 浏览: 403484 次
- 性别:
- 来自: 珠海
-
文章分类
最新评论
-
一笑_奈何：
什么呀，写的不清不楚的。你是采用的什么监听事件呀
JQuery Mobile列表内容分版面异步加载（一） -
sf2gis：
谢谢，解决了。
搭建struts2，解决Tomcat启动时的错误：严重: Error filterStart -
effort0829：
其实解决办法很简单的，只要架上对应的jar包就可以了。
解决SSH的问题：NoClassDefFoundError: org/aopalliance/aop/Advice -
jianlangood：
受教了，感谢！
解决SSH的问题：NoClassDefFoundError: org/aopalliance/aop/Advice -
jsdsh：
好,太好了.谢谢
Open Chart Flash [ofc]图表示例一 （附图）
包括： 折线图、饼图、柱状图、堆积图。
有些公用的JS可以提取出来，这里为了简单点就没有弄。
下方有图
<%@ 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>
1
顶
顶
6
踩
踩
分享到：
发表评论
-
JQuery的dialog用法总结
2012-10-26 14:46 2567JQuery的dialog用法总结 示例： 1. 作为弹出 ... -
使用prototype.js经验积累
2011-11-16 14:54 11671、Ajax返回xml格式的对象 1）前台js funct ... -
也说字符串截取
2011-09-09 09:20 1007字符串截取操作在程序中运用是代码中必须会用到的，不论你是在写J ... -
JQuery Mobile列表内容分版面异步加载（二）
2011-07-26 11:23 10638上一文章主要分析了一下“JQuery Mobile列表内容分版 ... -
JQuery Mobile列表内容分版面异步加载（一）
2011-07-23 11:46 13216前言： 用智能手 ... -
OpenFlashChart说明.xls
2011-05-04 09:29 1063不是我总结的，网上下载的，忘记了出处，非常抱歉！ 好东西共享一 ... -
按钮id与js方法名相同会报js错误
2011-03-17 16:00 1257不经意间发现这个问题。花了好多时间才发现是这个原因。 -
借助下拉列表框选项排序的js，同时兼容IE6与IE8兼容的问题
2010-12-23 15:34 3147注：IE7下未测试。 页面代码： <table c ... -
表格列过滤功能 [系列2]
2010-10-21 09:23 1998=============================== ... -
表格列过滤功能 [系列1]
2010-10-16 15:01 1362注：用到prototype.js中的$("xxx&q ...
相关推荐
`python-ofc-library`和`ruby-ofc-library-pullmonkey`则是Python和Ruby的接口，使得这两个动态语言的开发者也能方便地利用Open Flash Chart的图表功能。 总的来说，Open Flash Chart是一个强大的图表库，其源代码...
Open Flash Chart是一款强大的开源图表生成库，专门用于创建高质量、互动性强的Flash图表。这款组件以其易用性和灵活性著称，使得开发者无需深入学习复杂的Flash编程就能轻松制作出各种复杂的数据可视化效果。以下是...
Open Flash Chart是一款开源的Flash图表库，它允许开发者通过简单的JavaScript接口创建出丰富的、动态的、具有交互性的图表。这个库特别适用于那些需要在网页上展示数据可视化效果，但又希望图表具备高质量外观和...
本实例在IE6、IE7、IE8、Chrome、Firefox测试通过，在实际项目使用中，对可能出现的问题，尤其在IE6中无法显示flash图表，本人特撰写《Flash图表组件——使用Open Flash Chart 2.0的一些问题及解决办法》，具体访问...
Open Flash Chart是一款强大的开源图表库，专为PHP开发者设计，用于创建各种美观且交互性强的数据可视化图表。它以其出色的视觉效果和丰富的自定义选项，在Web应用中广泛使用，尤其适用于数据分析、报表展示以及数据...
博客链接指向的是ITEYE博主 Moyuan 的一篇关于Open Flash Chart的文章，虽然具体内容没有提供，但通常这样的博客会包含如何使用Open Flash Chart的教程、示例代码和一些实用技巧。 标签“源码”表明我们可以获取到...
Open Flash Chart 是一款开源的Flash图表库，它允许开发者通过简单的JavaScript API生成各种美观的、交互式的图表。这个教程可能是为了帮助用户理解如何利用Open Flash Chart来创建动态和定制化的图表，适合Web...
Open Flash Chart API 是一款强大的开源图表库，它使用Flash技术来生成高质量、交互式的图表。在Web开发中，数据可视化是至关重要的，Open Flash Chart API 提供了丰富的功能，使得开发者能够轻松创建各种类型的图表...
**open_flash_chart** 是一个基于Flash的开源图表库，专为.NET开发者设计，提供免费的图表绘制功能。这个控件允许程序员创建丰富的、交互式的图表，适用于数据可视化的需求，如统计报告、数据分析或者Web应用程序中...
在压缩包文件"ofc"中，可能包含了Open Flash Chart的源代码、示例项目、文档和库文件，供开发者学习和参考。通过深入研究这些内容，开发者可以更好地理解和掌握Open Flash Chart的使用方法，从而在自己的ASP.NET项目...
Open Flash Chart是一款强大的开源图表库，它使用Flash技术来创建美观、交互式的图表。这款工具在Web开发中尤其受欢迎，因为它允许开发者轻松地为网站添加数据可视化功能，而无需深入学习复杂的图形编程。以下是关于...
Open Flash Chart是一款强大的图表工具，尤其适用于Java开发者。它是一个基于Flash的图形库，能够创建出美观、流畅的图表，支持多种图表类型，包括条形图、饼图、线图等，总计11种基本图形，能满足大多数数据分析和...
Open Flash Chart 2（简称OFC2）是一款强大的开源图表生成库，专为创建交互式、动态的Flash图表而设计。它允许开发者通过JSON格式的数据来构建各种类型的图表，如折线图、柱状图、饼图等，广泛应用于数据分析、报表...
4. **perl-ofc-library**、**perl-2-ofc-library**：这是Perl语言的Open Flash Chart接口库，允许Perl开发者通过简单的API调用来生成和定制图表。 5. **java-ofc-library**：Java版本的Open Flash Chart库，为Java...
Open Flash Chart是一款强大的开源Flash图表库，用于在Web应用程序中创建高质量、互动的图表。它提供了丰富的自定义选项，能够生成各种类型的图表，包括柱状图、饼图、线点图等，使得数据可视化变得更加简单易行。在...
【标题】"open-flash-chart-1.9.6.zip" 是一个开源的Web图表组件的压缩包，其核心是 "OpenFlashChart"。这个组件专为在网页上以Flash格式展示各种统计图表而设计，包括但不限于曲线图和饼图。它提供了一种灵活的方式...
Open Flash Chart是一款强大的开源Flash图表组件，用于创建各种复杂且美观的数据可视化效果。这款软件的最新版本2.0带来了更多的功能和改进，旨在为开发者提供更便捷、灵活的方式来展示数据。下面将详细介绍Open ...
Open Flash Chart（OFC）是一款强大的图表生成库，它使用Flash技术创建各种动态、美观的图表。在Web应用程序中，它为开发者提供了丰富的图表展示选项，使得数据可视化变得更为直观和吸引人。本资源主要关注OFC的二次...