zoukankan      html  css  js  c++  java
  • Openflashchart及代理类设计介绍

    Open-flash-chart及代理类设计介绍

     

    目录

    1介绍open-flash-chart. 1

    2最简单的测试用例... 1

    3代理类... 2

    3.1 为何设计代理类... 2

    3.1 open-flash-chart 模型图... 4

    3.2  代理之后模型图... 4

    3.3  代理之后的好处... 4

    4 实际例子... 5

    4.1 折线图... 5

    4.2 面积图... 6

    4.3 比较折线图前台页和面积图前台页... 8

    5 不足与更新... 8

    6 附件代码测试方法... 8

     

    1介绍open-flash-chart

    Open-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

    <?php

    include_once 'ofc-library/open_flash_chart_object.php';

    open_flash_chart_object( 500, 250, 'http://'. $_SERVER['SERVER_NAME'] .'/1.9.6/data-1.php', false );

    ?>

    2)     后端数据页代码

    <?php

    include_once( 'ofc-library/open-flash-chart.php' );

    $xarr=array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec' );

    $yarr = array('1','5','7','8','4','6','9','10','12','11','13','33');

    $ymax = 40;

    $g = new graph();

    $g->title( '最简单的例子 ', '{font-size: 26px;}' );

    $g->set_x_labels($xarr );

    $g->set_data( $yarr );

    $g->set_y_max( $ymax ); 

    echo $g->render();

    ?>

     

    3)  效果


    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)直接输出上面的图

    3.1 open-flash-chart 模型图

    3.2  代理之后模型图

    3.3  代理之后的好处

    1)数据整理和展示都在show page.

    后台页只作为一个类似图形驱动的存在,和数据不再关联

    2)数据整理的方式被归纳为一致,不在和展示图形的样子有关系,可以方便的将图形驱动页由折线图更改为面积图

    4 实际例子

    4.1 折线图

    1)前台页

    <?php

    include_once 'ofc-library/open_flash_chart_object.php';

    include_once 'class_myline.php';

    session_start(); 

    $lm_array =array

    (

    "qiyi"=>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.php

    3)效果

     

    4.2 面积图

    1)前台页

    <?php

    include_once 'ofc-library/open_flash_chart_object.php';

    include_once 'class_myline.php';

    session_start(); 

    $lm_array =array

    (

    "qiyi"=>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)  效果

     

    4.3 比较折线图前台页和面积图前台页

    可以看见,现在的前台页代码趋于一致

    5 不足与更新

    一个页面展示多个图的时候,实际还是需要带参数

    因为这样,才能将每个图的数据源压到不同的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);

     

    6 附件代码测试方法

    把整个1.9.6.zip解压到htdocs,然后访问你的

    http://server/1.9.6/test1.php

    http://server/1.9.6/testll.php

    http://server/1.9.6/testarea.php

  • 相关阅读:
    原生JS中Ajax的使用方法
    back-to-top回到顶部
    atom插件
    git 命令操作
    常用font-family
    上传按钮美化
    mongodb
    GraphicsMagick命令
    enctype=“multipart/form-data”详解
    操作符
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3071891.html
Copyright © 2011-2022 走看看