Chinaunix首页 | 论坛 | 博客

aef25u的ChinaUnix博客

首页　| 　博文目录　| 　关于我

aef25u

  • 博客访问： 221843
  • 博文数量： 36
  • 博客积分： 1188
  • 博客等级： 军士长
  • 技术积分： 802
  • 用 户 组： 普通用户
  • 注册时间： 2010-04-08 21:45
文章分类

全部博文（36）

文章存档

2020年（1）

2017年（2）

2015年（1）

2014年（1）

2013年（1）

2012年（3）

2011年（27）

我的朋友
最近访客
推荐博文
相关博文
Dancer use Open flash chart2 example

分类： Windows平台

2013-11-09 02:21:34

dancer 网站原码：08MyChart2.rar

一、本站说明

这是perl的Dancer中使用open flash chart V2的简单示例。

所需工具：

1、open flash chart2 版本：open-flash-chart-2-Lug-Wyrm-Charmer
2、jofc2版本：jofc2-1.0-0
3、除dancer相关模块，仍需安装以下perl模块：
    moose
    Chart::OFC2
4、本示例dancer使用template_toolkit模版工具

运行环境：

Windows XP、strawberry perl、Dancer 1.3011、Firefox
MyDancer.pm app.pl 及tt文档编码： utf-8
注：使用utf-8编码，open flash chart V2可以展示中文，网上说V1版本X轴不能展示中文。

本网站主要介绍：

1、在dancer中配置open flash chart2 的简单说明。
2、不使用Chart::OFC2，直接由html静态文档生成flash示例
3、使用Chart::OFC2与TT实现网页MVC模式的架构
4、open flash chart2不能脱离Web应用服务器，本站适合普通用户作为学习open flash chart2的demo

内附(位于08MyChart2\bin下)：

start.bat 方便本机运行WEB服务器
1、双击start.bat
2、在浏览器下输入 home

二、配置

配置open flash chart

1、网上下载open-flash-chart-2-Lug-Wyrm-Charmer。
2、配置open-flash-chart.swf、swfobject.js：将open-flash-chart-2-Lug-Wyrm-Charmer解压 并改名为ofc2,放于08MyChart2/public目录下，注意在tt文件中配置此两份文件的路径， 如下图（详见08MyChart2\views\chart.tt）：

配置jofc2-1.0-0

1、网上下载jofc2-1.0-0
2、配置jofc2-1.0-0.jar、xstream-1.3.1.jar：在jofc2-1.0-0下载包中可找到这2份文件， 放于08MyChart2\lib目录下，如下图：

三、dancer 中使用open flash chart生成图表的流程

1、使用Chart::OFC2生成绘图所需的json格式数据，即bar_data
2、传递json数据生成图表，bar?ofc=bar_data
2.1生成图表的url:bar，而?ofc=bar_data表示接收bar_data生成的json数据，并传递给tt模版
2.2通过data_json参数传递数据至tt模版，即data_json=>$data为：data_json=>bar_data。
注：要弄懂此流程，最好先上网搜索swfobject.js和open-flash-chart.swf的作用。

当读者明白此流程后，此网站将是你学习open flash chart2绘制各种图片的demo，特别是给没有Web应用服务器的用户带来很大的便利。
（原因：前文已提到过open flash chart2不能脱离Web应用服务器。）

dancer.pl代码结构


点击(此处)折叠或打开

  1. #!C:\strawberry\perl\bin\perl.exe
  2. use Dancer;
  3. use MyDancer;

  5. set layout=>'main.tt';

  7. #生成绘图所需的json格式数据
  8. get '/bar_data' => sub {
  9.     use Chart::OFC2;

  11.     my $chart = Chart::OFC2->new(
  12.     ...
  13.     );
  14.     return $chart->render_chart_data();
  15. };

  17. #输出图片到网页，以bar图为例：
  18. #浏览器输入url格式:http://localhost:3000/bar?ofc=bar_data
  19. #get '/:type'此时路径为：http://localhost:3000/bar
  20. #?ofc=bar_data，表示传递http://localhost:3000/bar_data生成的json数据
  21. #通过data_json参数传递数据至tt模版，即data_json=>$data为：data_json=>bar_data。
  22. get '/:type' => sub {
  23.     my $type = params->{type};
  24.     my $title='绘制' . $type . '图';
  25.     my $data =$type . '_data';
  26.     template 'chart'=>{example=>"$title",data_json=>$data};
  27. };

  29. dance;

对应TT模版：

位于views文件夹：chart.tt


点击(此处)折叠或打开

  1. <h2>< % example % ></h2>
  2.     <div id="my_chart"></div>

  4.     <script type="text/javascript" src="/ofc2/js/swfobject.js"></script>
  5.     <script type="text/javascript" src="/ofc2/js/json/json2.js"></script>
  6.     <script type="text/javascript">
  7.     swfobject.embedSWF("/ofc2/open-flash-chart.swf", "my_chart",
  8.       "450", "250", "9.0.0", "expressInstall.swf",
  9.       {"get-data":"< % data_json % >"});
  10.       
  11.     </script>

四、一个真实的例子绘制bar 图：

dancer.pl代码：

点击(此处)折叠或打开

  1. use Dancer;
  2. use MyDancer;

  4. set layout=>'main.tt';

  6. #生成绘图所需的json格式数据
  7. get '/bar_data' => sub {

  9.     use Chart::OFC2;
  10.     use Chart::OFC2::Axis;
  11.     use Chart::OFC2::Bar;

  13.     my $chart = Chart::OFC2->new(
  14.         'title' => 'Bar chart 示例',
  15.         x_axis => {
  16.             labels => {
  17.                 labels => [ '1月', '2月', '3月', '4月', '5月' ],
  18.             }
  19.         },
  20.     );
  21.     
  22.     my $bar = Chart::OFC2::Bar->new();
  23.     $bar->values([ 1..5 ]);
  24.     $chart->add_element($bar);
  25.     
  26.     return $chart->render_chart_data();
  27.      
  28. };

  30. get '/bar' => sub {
  31.     my $title='绘制bar图';
  32.     template 'bar'=>{example=>"$title",data_json=>'bar_data'};
  33. };
  34. dance;
对应tt模版代码：

位于views文件夹：chart.tt，模版可见上文第三点。

更灵活的dancer：

将以上TT模版另存为chart.tt，我们修改get '/bar' => sub {...}处代码，可以让我们统一用chart.tt输出各种图片，dancer.pl代码修改为。


点击(此处)折叠或打开

  1. get '/:type' => sub {
  2.     my $type = params->{type};
  3.     my $title='绘制' . $type . '图';
  4.     my $data =$type . '_data';
  5.     template 'chart'=>{example=>"$title",data_json=>"$data"};
  6. };


五、绘制3D柱状图：

实现方式一：

实例化类时，将type_name属性改为bar_3d。

dancer.pl代码：

点击(此处)折叠或打开

  1. my $bar = Chart::OFC2::Bar->new(
  2.        type_name=>'bar_3d',
  3.     );

实现方式二：

利用moose写Bar_3D.pm模块，放于本站目录08MyChart2/lib下。pm代码如下

Bar_3D.pm代码：


点击(此处)折叠或打开

  1. package Bar_3D;
  2. use Moose;
  3. extends 'Chart::OFC2::Bar';
  4. has '+type_name' => (default => 'bar_3d');

  6. 1;

对应dancer.pl代码：


点击(此处)折叠或打开

  1. get '/3D_bar_data' => sub {

  3.     use Chart::OFC2;
  4.     
  5.     my $chart = Chart::OFC2->new(
  6.         'title' => Chart::OFC2::Title->new(
  7.             'text' => '3Dbar chart 示例',
  8.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  9.         ),
  10.         x_axis => {
  11.             labels => {
  12.                 labels => [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
  13.             },
  14.         },
  15.         y_axis => {max=>14,steps=>1},
  16.     );
  17.     ##################################
  18.     use Bar_3D;
  19.     my $bar = Bar_3D->new();
  20.     ##################################
  21.     $bar->values([ 1..12 ]);
  22.     $bar->colour('0x660099');
  23.     $chart->add_element($bar);
  24.     
  25.     print $chart->render_chart_data();
  26.      
  27. };


附：本站dancer代码

在08MyChart2\bin目录下的app_simple.pl文件，是open flash chart 输出图表最简单的例子, 相对于app.pl没有干扰信息，较容易理解，比较适合不太了解dancer的读者。

app.pl代码：


点击(此处)折叠或打开

  1. #!C:\strawberry\perl\bin\perl.exe
  2. use Dancer;
  3. use MyDancer;

  5. set layout=>'main.tt';

  7. #首页，关于open flash chart2的配置说明
  8. #use MyDancer;

  10. #直接由html静态文档生成flash示例
  11. get '/statepage' => sub {
  12.     template 'statepage';
  13. };

  15. #本站dancer代码输出模版
  16. get '/dancer_code' => sub {
  17.     template 'd_code';
  18. };

  20. #生成bar图所需的json格式数据
  21. get '/bar_data' => sub {

  23.     use Chart::OFC2;
  24.     use Chart::OFC2::Bar;

  26.     my $chart = Chart::OFC2->new(
  27.         'title' => Chart::OFC2::Title->new(
  28.             'text' => 'Bar chart 示例',
  29.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  30.         ),
  31.         x_axis => {
  32.             labels => {
  33.                 labels => [ '1月', '2月', '3月', '4月', '5月' ],
  34.             }
  35.         },
  36.         y_axis => {max=>6,steps=>1},
  37.     );
  38.     
  39.     my $bar = Chart::OFC2::Bar->new();
  40.     $bar->values([ 1..5 ]);
  41.     $bar->colour('0x660099');
  42.     $chart->add_element($bar);
  43.     
  44.     print $chart->render_chart_data();
  45.      
  46. };

  48. #生成3Dbar图所需的json格式数据
  49. get '/3D_bar_data' => sub {

  51.     use Chart::OFC2;
  52.     use Chart::OFC2::Bar;

  54.     my $chart = Chart::OFC2->new(
  55.         'title' => Chart::OFC2::Title->new(
  56.             'text' => '3Dbar chart 示例',
  57.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  58.         ),
  59.         x_axis => {
  60.             labels => {
  61.                 labels => [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
  62.             },
  63.         },
  64.         y_axis => {max=>14,steps=>1},
  65.     );
  66.     
  67.     #方式一：修改type_name属性可以生成bar、bar_3d、bar_filled、bar_glass类型的柱状图
  68.     my $bar = Chart::OFC2::Bar->new(
  69.        type_name=>'bar_3d',
  70.     );
  71.     
  72.     #方式二：写个Bar_3D.pm放于本站目录08MyChart2/lib下。
  73.     #use Bar_3D;
  74.     #my $bar = Bar_3D->new();
  75.     
  76.     $bar->values([ 1..12 ]);
  77.     $bar->colour('0x660099');
  78.     $chart->add_element($bar);
  79.     
  80.     print $chart->render_chart_data();
  81.      
  82. };

  84. #001生成HBar图所需的json格式数据
  85. get '/HBar_data' => sub {

  87.     use Chart::OFC2;
  88.     use Chart::OFC2::HBar;

  90.     my $chart = Chart::OFC2->new(
  91.         'title' => Chart::OFC2::Title->new(
  92.             'text' => 'HBar chart 示例',
  93.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  94.         ),

  96.         'y_axis' => Chart::OFC2::YAxis->new(
  97.             'labels' => [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ],
  98.             'offset' => 1,
  99.         ),
  100.         'tooltip' => {
  101.             'mouse' => 2,
  102.         },
  103.     );
  104.     
  105.     my $hbar = Chart::OFC2::HBar->new(
  106.         'values' => [ { 'left' => 1.5, 'right' => 3, }, 1, 2, 3, 4, 5, ],
  107.         'colour' => '0x660099',
  108.     );

  110.     $chart->add_element($hbar);
  111.     print $chart->render_chart_data();

  113. };
  114. #003生成Line图所需的json格式数据
  115. get '/Line_data' => sub {

  117.     use Chart::OFC2;
  118.     use Chart::OFC2::Line;
  119.     
  120.     my $chart = Chart::OFC2->new(
  121.         'title' => Chart::OFC2::Title->new(
  122.             'text' => 'Line chart 示例',
  123.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  124.         ),
  125.         'x_axis' => Chart::OFC2::XAxis->new(
  126.             'labels' => [ 'Jan', 'Feb', 'Mar', 'Apr', 'May' ],
  127.         ),
  128.         y_axis => {max=>6,steps=>1},
  129.     );
  130.   
  131.     my $line = Chart::OFC2::Line->new();
  132.     $line->values([ 1..5 ]);
  133.     $chart->add_element($line);

  135.     print $chart->render_chart_data();

  137. };


  140. #004生成pie图所需的json格式数据
  141. get '/Pie_data' => sub {
  142. use Data::Dumper;

  144.     use Chart::OFC2;
  145.     use Chart::OFC2::Pie;
  146.     my $chart = Chart::OFC2->new(
  147.         'title' => Chart::OFC2::Title->new(
  148.             'text' => 'Pie chart 示例',
  149.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  150.         ),
  151.     );
  152.     my $pie = Chart::OFC2::Pie->new(
  153.         tip => '#val# of #total#
    #percent# of 100%'    ,
  154.     );
  155.     $pie->values([ (1 .. 5) ]);
  156.     $pie->values->labels([qw( IE Firefox Opera Wii Other)]);
  157.     $pie->values->colours([ '#d01f3c', '#356aa0', '#C79810', '#73880A', '#D15600' ]);

  159.     $chart->add_element($pie);
  160.     print $chart->render_chart_data();

  162. };


  165. #生成复合图形Line和Bar
  166. get '/Line_Bar_data' => sub {
  167.     
  168.     use List::Util;
  169.     use Chart::OFC2;
  170.     use Chart::OFC2::Bar;
  171.     use Chart::OFC2::Line;
  172.     
  173.     my $chart = Chart::OFC2->new(
  174.         'title' => Chart::OFC2::Title->new(
  175.             'text' => 'Line and Bar chart 示例',
  176.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  177.         ),
  178.         x_axis => {
  179.             labels => {
  180.                 labels => [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
  181.             }
  182.         },
  183.         y_axis => {max=>14,steps=>1},
  184.     );
  185.     
  186.     my @a=(1..12);
  187.     @a=List::Util::shuffle @a;
  188.     my $bar = Chart::OFC2::Bar->new(
  189.        type_name=>'bar_glass',
  190.     );
  191.     $bar->values(\@a);
  192.     $bar->colour('0x660099');
  193.     my $line = Chart::OFC2::Line->new();
  194.     $line->values(\@a);

  196.     $chart->add_element($bar);
  197.     $chart->add_element($line);
  198.     print $chart->render_chart_data();

  200. };
  201.   
  202. #get '/bar' => sub {
  203. # my $title='绘制bar图';
  204. # template 'chart'=>{example=>"$title",data_json=>'bar_data'};
  205. #};

  207. #输出图片到网页，以bar图为例：
  208. #浏览器输入url格式:http://localhost:3000/bar?ofc=bar_data
  209. #get '/:type'此时路径为：http://localhost:3000/bar
  210. #?ofc=bar_data，表示传递http://localhost:3000/bar_data生成的json数据
  211. #通过data_json参数传递数据至tt模版，即data_json=>$data为：data_json=>bar_data。
  212. get '/:type' => sub {
  213.     my $type = params->{type};
  214.     my $title='绘制' . $type . '图';
  215.     my $data =$type . '_data';
  216.     if (($type eq 'bar') or ($type eq '3D_bar')){
  217.         template "$type"=>{example=>"$title",data_json=>"$data"};
  218.     }else{
  219.     template 'chart'=>{example=>"$title",data_json=>"$data"};}
  220. };

  222. dance;


附：其他图表








阅读(3357) | 评论(0) | 转发(0) |
0

上一篇：由Wxperl demo修改整理代码，准备用作绩效测算工具框架

下一篇：Moose学习一例

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6