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代码结构
-
#!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"};
-
};
五、绘制3D柱状图:
实现方式一:
实例化类时,将type_name属性改为bar_3d。
dancer.pl代码:
-
my $bar = Chart::OFC2::Bar->new(
-
type_name=>'bar_3d',
-
);
实现方式二:
利用moose写Bar_3D.pm模块,放于本站目录08MyChart2/lib下。pm代码如下
Bar_3D.pm代码:
-
package Bar_3D;
-
use Moose;
-
extends 'Chart::OFC2::Bar';
-
has '+type_name' => (default => 'bar_3d');
-
-
1;
对应dancer.pl代码:
-
get '/3D_bar_data' => sub {
-
-
use Chart::OFC2;
-
-
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},
-
);
-
##################################
-
use Bar_3D;
-
my $bar = Bar_3D->new();
-
##################################
-
$bar->values([ 1..12 ]);
-
$bar->colour('0x660099');
-
$chart->add_element($bar);
-
-
print $chart->render_chart_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#
#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;
附:其他图表
阅读(3416) | 评论(0) | 转发(0) |