PHP-Open Flash Chart报表生成
下载:
http://www.cnblogs.com/huangcong/archive/2013/01/27/2878650.html
安装:
解压ZIP包, 将open-flash-chart.swf以及swfobject.js三个文件拷贝到您的服务器根目录下, 当然你也可以自由放置这三个文件的位置, 但是一定要确保文件路径的正确调用。
使用:
1.使用静态数据:
此处index.html、open-flash-chart.swf、swfobject.js以及data.txt在同一文件加下, 自己制定也可以;
以下为index.html内容:
<div id="chart"></div> <script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {"data-file":"data.txt"}; //这里是数据源 静态数据
var params = {menu: "false",scale: "noScale",wmode:"opaque"};
swfobject.embedSWF("open-flash-chart.swf", "chart", "550px", "350px", "9.0.0","expressInstall.swf", flashvars,params);
</script>
注意: flashvars是设置的数据源, 该数据位JOSN格式数据, 本例提供了一个txt的JOSN数据源, 接下来会用PHP来生成JOSN数据, 然后用OFC调用渲染出图表的案例。
params是设置FLASH输出的菜单、比例、窗口模式等属性。 最后载入flash文件, 注意“chart”是页面中的一个HTML元素的ID值, 就是用这个ID来装入图表。接着就是设置元素的大小, 很简单吧。
以下为data.txt内容:
{
"title": {
"text": "Many data lines",
"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
},
"y_legend":{
"text": "Open Flash Chart",
"style": "{color: #736AFF; font-size: 12px;}"
},
"elements":[
{
"type": "bar_glass",
"alpha": 0.5,
"colour": "#9933CC",
"text--": "Page views",
"font-size--": 10,
"values": [9,6,7,9,5,{"top":7,"colour":"#FF0000", "tip": "Mooo#val#"},6,9,7]
}
],
"x_axis":{
"stroke": 1,
"tick_height": 10,
"colour": "#d000d0",
"grid_colour": "#00ff00",
"labels": {
"labels": ["January","February","March","April","May","June","July","August","Spetember"]
}
},
"y_axis":{
"stroke": 4,
"tick_length": 3,
"colour": "#d000d0",
"grid_colour": "#00ff00",
"offset": 0,
"max": 20
},
"tooltip": {
"text": "My Tipval=#val#, top=#top#"
}
}
结果如图:

2.使用动态数据
此处index.html、open-flash-chart.swf、swfobject.js以及apra_pie.php在同一文件加下, 自己制定也可以;
index.html内容
<div id="chart"></div> <script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {"data-file":"area_pie.php"}; //这里是数据源
var params = {menu: "false",scale: "noScale",wmode:"opaque"};
swfobject.embedSWF("open-flash-chart.swf", "chart", "550px", "350px", "9.0.0","expressInstall.swf", flashvars,params);
</script>
注意:与上一张不同的是我们使用的数据源文件area_pie.php, 该文件就是用来将MYSQL数据生成JSON数据的。
准备OFC库
我们知道OFC提供了各种接口程序, 包括PHP/PHP5、Pear、Python、Java、Dotnet。
我们将从官网上下载的压缩包文件解压后发现有一个名为php-ofc-library文件夹, 这里放的就是PHP接口的所有库文件, 不用管里面的文件, 只需把整个文件夹复制到你的项目的根目录下并改名为ofc。
读取MySQL生成JSON数据
这是关键部分, 调用mysql数据库接口的部分代码大家可以自己写下, 限于篇幅, 本文就没有将其附上。
area_pie.php代码如下:
include_once ('global.php'); //调用数据库
include_once ('ofc/open-flash-chart.php'); //调用OFC库文件
//设置图表标题
$title = new title( '各区域单位场所数量分布图'.date('Y-m-d') );
$title->set_style("font-size:12px; font-weight:bold;");
$pie = new pie();
$pie->set_alpha(0.6);
$pie->set_start_angle( 32 );
$pie->add_animation( new pie_fade() );
$pie->set_tooltip( '#val# of #total##percent# of 100%' );
$pie->set_colours( array('#1C9E05','#FF368D','#0099cc','#d853ce','#ff7400','#006e2e',
'#d15600','#4096ee','#c79810') );
//读取各区域信息
$sql="select sum(total) as num from ".$prefix."district";
$query=$db->query($sql);
$rs=$db->fetch_array($query);
$t=$rs[num];
$sql="select name,total from ".$prefix."district";
$query=$db->query($sql);
while($row=$db->fetch_array($query)){
$total=$row[total];
if(!empty($t)){
$v=round($total/$t,4)*100;
}else{
$v=0;
}
$dis[]=array("name"=>$row[name],"total"=>$row[total],"v"=>$v);
}
$len_dis=count($dis);
for($i=0;$i<$len_dis;$i++){
$dis_value[]=new pie_value(intval($dis[$i][total]),$dis[$i][name]."(".$dis[$i][v]."%)");
}
$pie->set_values($dis_value);
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $pie );
$chart->x_axis = null;
echo $chart->toPrettyString(); //生成json数据
参考http://www.helloweba.com/view-blog-40.html
PHP-Open Flash Chart报表生成的更多相关文章
- Open Flash Chart在php中的使用教程
http://www.cnblogs.com/huangcong/archive/2013/01/27/2878650.html 为了画一个漂亮的表格,我从网上找到了OpenFlashChart(of ...
- Python Open Flash Chart (pyOFC2) — Home
Python Open Flash Chart (pyOFC2) - Home pyOFC2 Python Open Flash Chart 2
- 使用Open Flash Chart(OFC)制作图表(Struts2处理)
Java开源项目中制作图表比较出色的就是JFreeChart了,相信大家都听说过,它不仅可以做出非常漂亮的柱状图,饼状图,折线图基本图形之外,还能制作甘特图,仪表盘等图表.在Web应用中可以为项目增色 ...
- Open Flash Chart 之线图(二)
上一节在研究Open Flash Chart时,漏掉不少东西,只是简单的熟悉了一下后端的属性设置.今天再来补充一下. 一.显示Open Flash Chart图表 Open Flash Chart 前 ...
- Open Flash Chart IO ERROR Loading test data Error #2032
http://blog.sina.com.cn/s/blog_6754464e0100qfvd.html Open Flash Chart 2 提示Open Flash Chart IO ERROR ...
- Open Flash Chart 简介
http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-ofc/ Open Flash Chart(OFC)是一个开源的 Flash 图表绘 ...
- Open Flash Chart图表的JSON格式基本属性详解
http://blog.csdn.net/wangwenhui11/article/details/4283571 数据文件必须是JSON格式.JSON对象的基本格式: {} 把所有对象都编写在{}里 ...
- Open Flash Chart 之线图
天公司要求开发一个曲线图,简单看了一下之前公司的一个系统,发现一个曲线图效果还不错,查了一下叫OpenFlashChart,还是很不错的,很多人用.研究了一下,发现还不错,特地写了个DEMO测试下. ...
- PHP-Open Flash Chart学习一(swfobject知识)
首先必须了解下swfobject的知识 在网页里面插入swf再平常不过了, 一般会想到如下代码: <object classid="clsid:D27CDB6E-AE6D-11cf-9 ...
随机推荐
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- 从原型模式(Prototype Pattern)到 Clone
前面提到抽象工厂的实现,这里说说抽象工厂的原型实现,与工厂方法的实现不同,原型实现有他自己的优点和缺点 原型的优点: 1. 效率:clone是native方法,比new的效率高,当使用复杂循环嵌套对象 ...
- SXH232摄像头使用示范
It occurred to me suddenly that I wanted to program the our camera sensor for PC desktop, just like ...
- 第六章 JVM垃圾收集器(2)
上一章记录了几种常见的垃圾收集器,见<第五章 JVM垃圾收集器(1)> 1.G1 说明: 从上图来看,G1与CMS相比,仅在最后的"筛选回收"部分不同(CMS是并发清除 ...
- Leaflet绘制热力图【转】
http://blog.csdn.net/giser_whu/article/details/51485871 时下用的最多的开源二维webgis引擎应该是openlayers与leaflet了,le ...
- C# 实现PNG文件的背景透明显示,解决动态显示闪烁问题 【转】
http://blog.sina.com.cn/s/blog_402c071e0102x4rl.html 以下内容,对于想要使用C#实现PNG图片背景透明显示,同时动态显示时无闪烁问题的人来说, ...
- 【Other】最近在研究的, Java/Springboot/RPC/JPA等
我的Springboot框架,欢迎关注: https://github.com/junneyang/common-web-starter Dubbo-大波-服务化框架 dubbo_百度搜索 Dubbo ...
- VS2010 配置PCL1.6.0AII in one 无法启动程序ALL_BUILD
无法启动程序D:\build\debug\ALL_BUILD 系统找不到指定文件 解决办法:将project_inliers工程设置为启动项目 找到项目右击--设为启动项目. 将project_ ...
- jsAnim简单使用教程
引入jsAnim.js 定义动画元素 元素需要有position:relative;或者position:absolute;属性 添加js <!DOCTYPE HTML> <html ...
- Java 吸血鬼数字
非常羞愧(事实上没什么羞愧.水平就这样).搞了半晌才写出来了一个Java 版求四位吸血鬼数字的方法 吸血鬼数字是指位数为偶数的数字.能够由一对数字相乘而得到.而这对数字各包括乘积的一半位数的数字,当中 ...