多语言展示
当前在线:1792今日阅读:26今日分享:39

使用Open-flash-chart绘图及代理类设计介绍

该文是在奇虎工作中,实际使用的绘图引擎的设计稿
方法/步骤
1

介绍open-flash-chartOpen-flash-chart是一款用 open-flash-chart.swf 作为统计显示端,支持http数据源的统计工具http://teethgrinder.co.uk/open-flash-chart/我们下面的内容都是针对1.9.6版本来讲.所有代码文件,及内容格式均为utf-8

2

简单的测试用例Open-flash-chart 的使用上分为两个部分1)  前端展示页2)  后端数据页下面是一个简单的折线图的例子1)     前端展示页代码 test1.php  后端数据页代码 title( '最简单的例子 ', '{font-size: 26px;}' );$g->set_x_labels($xarr );$g->set_data( $yarr );$g->set_y_max( $ymax ); echo $g->render();?> 效果如下

3

代理类3.1 为何设计代理类因为使用open-free-chart每次使用来做工作,可能需要做2个事情。1)  做一个前端展示页2)  做一个后台数据源因此,希望有一个代理类,能完成如下工作希望有一个完整的能够在前端显示页代理操作的类class_myline该类功能如下(1)设置标题(2)设置数据,数据格式形式如下为$lm_array =array('qiyi'=>array(       '00:00'=>20.64       '00:05'=>21.64       '00:10'=>22.64       '00:15'=>53.64       ),'cnc'=>array(       '00:00'=>30.64       '00:05'=>31.64       '00:10'=>32.64       '00:15'=>13.64       ),'letv'=>array(       '00:00'=>40.64       '00:05'=>41.64       '00:10'=>42.64       '00:15'=>43.64       '00:20'=>44.64       '00:21'=>25.64       )); (3)直接输出上面的图

4

open-flash-chart 模型图

5

代理之后模型图

6

代理之后的好处1)数据整理和展示都在show page.后台页只作为一个类似图形驱动的存在,和数据不再关联2)数据整理的方式被归纳为一致,不在和展示图形的样子有关系,可以方便的将图形驱动页由折线图更改为面积图

7

实际例子4.1 折线图1)前台页  array(       '00:00'=> 20.64,       '00:05'=> 21.64,       '00:10'=> 22.64,       '00:15'=> 53.64,       '00:20'=> 44.64,       '00:21'=> 25.64       ),); $ml=new class_myline();$ml->set_title('运营商流量比较图');$ml->set_xtitle('时间');$ml->set_ytitle('带宽');$ml->set_data($lm_array);var_dump($ml);$char_data = serialize($ml);$_SESSION['char_data']=$char_data;open_flash_chart_object( 500, 250, 'http://'. $_SERVER['SERVER_NAME'] .'/1.9.6/data-ll.php', false ); ?> 2)图形驱动页 见data-ll.php3)效果

8

面积图)前台页 array(       '00:00'=> 20.64,       '00:05'=> 21.64,       '00:10'=> 22.64,       '00:15'=> 53.64,       '00:20'=> 44.64,       '00:21'=> 25.64       ) ); $ml=new class_myline();$ml->set_title('运营商流量汇总图');$ml->set_xtitle('时间');$ml->set_ytitle('带宽');$ml->set_data($lm_array);var_dump($ml);$char_data = serialize($ml);$_SESSION['char_data']=$char_data;open_flash_chart_object( 500, 250, 'http://'. $_SERVER['SERVER_NAME'] .'/1.9.6/data-area.php', false ); ?> 2)图形驱动页见data-area.php 3)  效果

9

比较折线图前台页和面积图前台页可以看见,现在的前台页代码趋于一致

10

不足与更新一个页面展示多个图的时候,实际还是需要带参数因为这样,才能将每个图的数据源压到不同的session中然后修改下驱动页,针对对应的参数取不同的session进行反序列化后绘制图形 $char_data = serialize($ml);$_SESSION['chart_data'.$i]=$char_data;open_flash_chart_object( 800, 400, 'http://'. $_SERVER['SERVER_NAME'] .':8360/www/grah/data-lm.php?chart_data=chart_data'.$i, false);

推荐信息