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

全部博文(36)

文章存档

2020年(1)

2017年(2)

2015年(1)

2014年(1)

2013年(1)

2012年(3)

2011年(27)

分类: 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;

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

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

  8.     my $chart = Chart::OFC2->new(
  9.     ...
  10.     );
  11.     return $chart->render_chart_data();
  12. };

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

  24. dance;

对应TT模版:

位于views文件夹:chart.tt


点击(此处)折叠或打开

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

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

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

dancer.pl代码:

点击(此处)折叠或打开

  1. use Dancer;
  2. use MyDancer;

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

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

  6.     use Chart::OFC2;
  7.     use Chart::OFC2::Axis;
  8.     use Chart::OFC2::Bar;

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

  25. get '/bar' => sub {
  26.     my $title='绘制bar图';
  27.     template 'bar'=>{example=>"$title",data_json=>'bar_data'};
  28. };
  29. 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');

  5. 1;

对应dancer.pl代码:


点击(此处)折叠或打开

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

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


附:本站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;

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

  5. #首页,关于open flash chart2的配置说明
  6. #use MyDancer;

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

  11. #本站dancer代码输出模版
  12. get '/dancer_code' => sub {
  13.     template 'd_code';
  14. };

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

  17.     use Chart::OFC2;
  18.     use Chart::OFC2::Bar;

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

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

  42.     use Chart::OFC2;
  43.     use Chart::OFC2::Bar;

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

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

  75.     use Chart::OFC2;
  76.     use Chart::OFC2::HBar;

  77.     my $chart = Chart::OFC2->new(
  78.         'title' => Chart::OFC2::Title->new(
  79.             'text' => 'HBar chart 示例',
  80.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  81.         ),

  82.         'y_axis' => Chart::OFC2::YAxis->new(
  83.             'labels' => [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ],
  84.             'offset' => 1,
  85.         ),
  86.         'tooltip' => {
  87.             'mouse' => 2,
  88.         },
  89.     );
  90.     
  91.     my $hbar = Chart::OFC2::HBar->new(
  92.         'values' => [ { 'left' => 1.5, 'right' => 3, }, 1, 2, 3, 4, 5, ],
  93.         'colour' => '0x660099',
  94.     );

  95.     $chart->add_element($hbar);
  96.     print $chart->render_chart_data();

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

  100.     use Chart::OFC2;
  101.     use Chart::OFC2::Line;
  102.     
  103.     my $chart = Chart::OFC2->new(
  104.         'title' => Chart::OFC2::Title->new(
  105.             'text' => 'Line chart 示例',
  106.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  107.         ),
  108.         'x_axis' => Chart::OFC2::XAxis->new(
  109.             'labels' => [ 'Jan', 'Feb', 'Mar', 'Apr', 'May' ],
  110.         ),
  111.         y_axis => {max=>6,steps=>1},
  112.     );
  113.   
  114.     my $line = Chart::OFC2::Line->new();
  115.     $line->values([ 1..5 ]);
  116.     $chart->add_element($line);

  117.     print $chart->render_chart_data();

  118. };


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

  122.     use Chart::OFC2;
  123.     use Chart::OFC2::Pie;
  124.     my $chart = Chart::OFC2->new(
  125.         'title' => Chart::OFC2::Title->new(
  126.             'text' => 'Pie chart 示例',
  127.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  128.         ),
  129.     );
  130.     my $pie = Chart::OFC2::Pie->new(
  131.         tip => '#val# of #total#
    #percent# of 100%'
    ,
  132.     );
  133.     $pie->values([ (1 .. 5) ]);
  134.     $pie->values->labels([qw( IE Firefox Opera Wii Other)]);
  135.     $pie->values->colours([ '#d01f3c', '#356aa0', '#C79810', '#73880A', '#D15600' ]);

  136.     $chart->add_element($pie);
  137.     print $chart->render_chart_data();

  138. };


  139. #生成复合图形Line和Bar
  140. get '/Line_Bar_data' => sub {
  141.     
  142.     use List::Util;
  143.     use Chart::OFC2;
  144.     use Chart::OFC2::Bar;
  145.     use Chart::OFC2::Line;
  146.     
  147.     my $chart = Chart::OFC2->new(
  148.         'title' => Chart::OFC2::Title->new(
  149.             'text' => 'Line and Bar chart 示例',
  150.             'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
  151.         ),
  152.         x_axis => {
  153.             labels => {
  154.                 labels => [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
  155.             }
  156.         },
  157.         y_axis => {max=>14,steps=>1},
  158.     );
  159.     
  160.     my @a=(1..12);
  161.     @a=List::Util::shuffle @a;
  162.     my $bar = Chart::OFC2::Bar->new(
  163.        type_name=>'bar_glass',
  164.     );
  165.     $bar->values(\@a);
  166.     $bar->colour('0x660099');
  167.     my $line = Chart::OFC2::Line->new();
  168.     $line->values(\@a);

  169.     $chart->add_element($bar);
  170.     $chart->add_element($line);
  171.     print $chart->render_chart_data();

  172. };
  173.   
  174. #get '/bar' => sub {
  175. # my $title='绘制bar图';
  176. # template 'chart'=>{example=>"$title",data_json=>'bar_data'};
  177. #};

  178. #输出图片到网页,以bar图为例:
  179. #浏览器输入url格式:http://localhost:3000/bar?ofc=bar_data
  180. #get '/:type'此时路径为:http://localhost:3000/bar
  181. #?ofc=bar_data,表示传递http://localhost:3000/bar_data生成的json数据
  182. #通过data_json参数传递数据至tt模版,即data_json=>$data为:data_json=>bar_data。
  183. get '/:type' => sub {
  184.     my $type = params->{type};
  185.     my $title='绘制' . $type . '图';
  186.     my $data =$type . '_data';
  187.     if (($type eq 'bar') or ($type eq '3D_bar')){
  188.         template "$type"=>{example=>"$title",data_json=>"$data"};
  189.     }else{
  190.     template 'chart'=>{example=>"$title",data_json=>"$data"};}
  191. };

  192. dance;


附:其他图表








阅读(3416) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~