
平台论坛博客文库

› 论坛 › 程序设计 › Perl › Dancer use Open flash chart2 example

Dancer use Open flash chart2 example [复制链接]

aef25u

稍有积蓄

论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2013-11-09 02:37 |只看该作者 |倒序浏览

本帖最后由 aef25u 于 2013-11-09 03:07 编辑

dancer 网站原码：

08MyChart2.rar (5.4 MB, 下载次数: 6)

一、本站说明

这是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服务器 http://localhost:3000/
1、双击start.bat
2、在浏览器下输入 http://localhost:3000/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格式数据，即http://localhost:3000/bar_data
2、传递json数据生成图表，http://localhost:3000/bar?ofc=bar_data
2.1生成图表的url:http://localhost:3000/bar，而?ofc=bar_data表示接收http://localhost:3000/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代码结构

#!C:\strawberry\perl\bin\perl.exe
use Dancer;
use MyDancer;
set layout=>'main.tt';
#生成绘图所需的json格式数据
get '/bar_data' => sub {
use Chart::OFC2;
my $chart = Chart::OFC2->new(
...
);
return $chart->render_chart_data();
};
#输出图片到网页，以bar图为例：
#浏览器输入url格式:http://localhost:3000/bar?ofc=bar_data
#get '/:type'此时路径为：http://localhost:3000/bar
#?ofc=bar_data，表示传递http://localhost:3000/bar_data生成的json数据
#通过data_json参数传递数据至tt模版，即data_json=>$data为：data_json=>bar_data。
get '/:type' => sub {
my $type = params->{type};
my $title='绘制' . $type . '图';
my $data =$type . '_data';
template 'chart'=>{example=>"$title",data_json=>$data};
};
dance;

复制代码

对应TT模版：

位于views文件夹：chart.tt

<h2>< % example % ></h2>
<div id="my_chart"></div>
<script type="text/javascript" src="/ofc2/js/swfobject.js"></script>
<script type="text/javascript" src="/ofc2/js/json/json2.js"></script>
<script type="text/javascript">
swfobject.embedSWF("/ofc2/open-flash-chart.swf", "my_chart",
"450", "250", "9.0.0", "expressInstall.swf",
{"get-data":"< % data_json % >"});
</script>

复制代码

四、一个真实的例子绘制bar 图：
dancer.pl代码：

use Dancer;
use MyDancer;
set layout=>'main.tt';
#生成绘图所需的json格式数据
get '/bar_data' => sub {
use Chart::OFC2;
use Chart::OFC2::Axis;
use Chart::OFC2::Bar;
my $chart = Chart::OFC2->new(
'title' => 'Bar chart 示例',
x_axis => {
labels => {
labels => [ '1月', '2月', '3月', '4月', '5月' ],
}
},
);
my $bar = Chart::OFC2::Bar->new();
$bar->values([ 1..5 ]);
$chart->add_element($bar);
return $chart->render_chart_data();
};
get '/bar' => sub {
my $title='绘制bar图';
template 'bar'=>{example=>"$title",data_json=>'bar_data'};
};
dance;

复制代码

对应tt模版代码：
位于views文件夹：chart.tt，模版可见上文第三点。
更灵活的dancer：

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

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

复制代码

附：本站dancer代码

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

#!C:\strawberry\perl\bin\perl.exe
use Dancer;
use MyDancer;
set layout=>'main.tt';
#首页，关于open flash chart2的配置说明
#use MyDancer;
#直接由html静态文档生成flash示例
get '/statepage' => sub {
template 'statepage';
};
#本站dancer代码输出模版
get '/dancer_code' => sub {
template 'd_code';
};
#生成bar图所需的json格式数据
get '/bar_data' => sub {
use Chart::OFC2;
use Chart::OFC2::Bar;
my $chart = Chart::OFC2->new(
'title' => Chart::OFC2::Title->new(
'text' => 'Bar chart 示例',
'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
),
x_axis => {
labels => {
labels => [ '1月', '2月', '3月', '4月', '5月' ],
}
},
y_axis => {max=>6,steps=>1},
);
my $bar = Chart::OFC2::Bar->new();
$bar->values([ 1..5 ]);
$bar->colour('0x660099');
$chart->add_element($bar);
print $chart->render_chart_data();
};
#生成3Dbar图所需的json格式数据
get '/3D_bar_data' => sub {
use Chart::OFC2;
use Chart::OFC2::Bar;
my $chart = Chart::OFC2->new(
'title' => Chart::OFC2::Title->new(
'text' => '3Dbar chart 示例',
'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
),
x_axis => {
labels => {
labels => [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
},
},
y_axis => {max=>14,steps=>1},
);
#方式一：修改type_name属性可以生成bar、bar_3d、bar_filled、bar_glass类型的柱状图
my $bar = Chart::OFC2::Bar->new(
type_name=>'bar_3d',
);
#方式二：写个Bar_3D.pm放于本站目录08MyChart2/lib下。
#use Bar_3D;
#my $bar = Bar_3D->new();
$bar->values([ 1..12 ]);
$bar->colour('0x660099');
$chart->add_element($bar);
print $chart->render_chart_data();
};
#001生成HBar图所需的json格式数据
get '/HBar_data' => sub {
use Chart::OFC2;
use Chart::OFC2::HBar;
my $chart = Chart::OFC2->new(
'title' => Chart::OFC2::Title->new(
'text' => 'HBar chart 示例',
'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
),
'y_axis' => Chart::OFC2::YAxis->new(
'labels' => [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ],
'offset' => 1,
),
'tooltip' => {
'mouse' => 2,
},
);
my $hbar = Chart::OFC2::HBar->new(
'values' => [ { 'left' => 1.5, 'right' => 3, }, 1, 2, 3, 4, 5, ],
'colour' => '0x660099',
);
$chart->add_element($hbar);
print $chart->render_chart_data();
};
#003生成Line图所需的json格式数据
get '/Line_data' => sub {
use Chart::OFC2;
use Chart::OFC2::Line;
my $chart = Chart::OFC2->new(
'title' => Chart::OFC2::Title->new(
'text' => 'Line chart 示例',
'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
),
'x_axis' => Chart::OFC2::XAxis->new(
'labels' => [ 'Jan', 'Feb', 'Mar', 'Apr', 'May' ],
),
y_axis => {max=>6,steps=>1},
);
my $line = Chart::OFC2::Line->new();
$line->values([ 1..5 ]);
$chart->add_element($line);
print $chart->render_chart_data();
};
#004生成pie图所需的json格式数据
get '/Pie_data' => sub {
use Data::Dumper;
use Chart::OFC2;
use Chart::OFC2::Pie;
my $chart = Chart::OFC2->new(
'title' => Chart::OFC2::Title->new(
'text' => 'Pie chart 示例',
'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
),
);
my $pie = Chart::OFC2::Pie->new(
tip => '#val# of #total#<br>#percent# of 100%',
);
$pie->values([ (1 .. 5) ]);
$pie->values->labels([qw( IE Firefox Opera Wii Other)]);
$pie->values->colours([ '#d01f3c', '#356aa0', '#C79810', '#73880A', '#D15600' ]);
$chart->add_element($pie);
print $chart->render_chart_data();
};
#生成复合图形Line和Bar
get '/Line_Bar_data' => sub {
use List::Util;
use Chart::OFC2;
use Chart::OFC2::Bar;
use Chart::OFC2::Line;
my $chart = Chart::OFC2->new(
'title' => Chart::OFC2::Title->new(
'text' => 'Line and Bar chart 示例',
'style' => '{font-size:20px; font-family:Verdana; text-align:center;}',
),
x_axis => {
labels => {
labels => [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
}
},
y_axis => {max=>14,steps=>1},
);
my @a=(1..12);
@a=List::Util::shuffle @a;
my $bar = Chart::OFC2::Bar->new(
type_name=>'bar_glass',
);
$bar->values(\@a);
$bar->colour('0x660099');
my $line = Chart::OFC2::Line->new();
$line->values(\@a);
$chart->add_element($bar);
$chart->add_element($line);
print $chart->render_chart_data();
};
#get '/bar' => sub {
# my $title='绘制bar图';
# template 'chart'=>{example=>"$title",data_json=>'bar_data'};
#};
#输出图片到网页，以bar图为例：
#浏览器输入url格式:http://localhost:3000/bar?ofc=bar_data
#get '/:type'此时路径为：http://localhost:3000/bar
#?ofc=bar_data，表示传递http://localhost:3000/bar_data生成的json数据
#通过data_json参数传递数据至tt模版，即data_json=>$data为：data_json=>bar_data。
get '/:type' => sub {
my $type = params->{type};
my $title='绘制' . $type . '图';
my $data =$type . '_data';
if (($type eq 'bar') or ($type eq '3D_bar')){
template "$type"=>{example=>"$title",data_json=>"$data"};
}else{
template 'chart'=>{example=>"$title",data_json=>"$data"};}
};
dance;

复制代码

附：其他图表

文库|博客

版主

论坛徽章:: 1

2楼 [报告]

发表于 2013-11-10 09:20 |只看该作者

图表的库很多，这种类型的库已经很不流行了，因为耗费太多后台资源。
现在都是纯js的库，后台把数据以JSON的形式扔到前端，前面的JS库负责所有其他的操作

实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？

pitonas

家境小康

论坛徽章:: 5

3楼 [报告]

发表于 2013-11-10 15:29 |只看该作者

膜拜！LZ很赞啊！

aef25u

稍有积蓄

论坛徽章:: 0

4楼 [报告]

发表于 2013-11-10 20:21 |只看该作者

本帖最后由 aef25u 于 2013-11-10 21:17 编辑

回复 2# py
open flash chart 应该正是像你所说的方式（通过swfobject.js文件）实现绘制flash图表的。Chart::OFC2是用moose写的构造绘制图表所需josn结构数据的模块。分析源码还可学习moose的oop实现。

版主

论坛徽章:: 1

5楼 [报告]

发表于 2013-11-11 07:47 |只看该作者

回复 4# aef25u

看了一下，是的，open flash chart是这样的。
我之前是看你在dancer中鼓捣了好多代码，以为是需要借助Chart::OFC2来生成graph。不过那么多代码就是为了生成json。。。。。

我是之前比较过graph library（主要是性能和功能），这个open flash chart是被我第一个叉掉的。后来选了amcharts，用了一段时间，最终换了highcharts。你可以看看highcharts的demo http://www.highcharts.com/demo/