Dancer use Open flash chart2 example

aef25u

dancer 網(wǎng)站原碼： 08MyChart2.rar (5.4 MB, 下載次數(shù): 6)

2013-11-09 02:38 上傳

點(diǎn)擊文件名下載附件

一、本站說明

這是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相關(guān)模塊，仍需安裝以下perl模塊：
    moose
    Chart::OFC2
4、本示例dancer使用template_toolkit模版工具
運(yùn)行環(huán)境：

Windows XP、strawberry perl、Dancer 1.3011、Firefox
MyDancer.pm app.pl 及tt文檔編碼： utf-8
注：使用utf-8編碼，open flash chart V2可以展示中文，網(wǎng)上說V1版本X軸不能展示中文。
本網(wǎng)站主要介紹：

1、在dancer中配置open flash chart2 的簡單說明。
2、不使用Chart::OFC2，直接由html靜態(tài)文檔生成flash示例
3、使用Chart::OFC2與TT實(shí)現(xiàn)網(wǎng)頁MVC模式的架構(gòu)
4、open flash chart2不能脫離Web應(yīng)用服務(wù)器，本站適合普通用戶作為學(xué)習(xí)open flash chart2的demo
內(nèi)附(位于08MyChart2\bin下)：

start.bat 方便本機(jī)運(yùn)行WEB服務(wù)器 http://localhost:3000/
1、雙擊start.bat
2、在瀏覽器下輸入 http://localhost:3000/home
二、配置
配置open flash chart
1、網(wǎng)上下載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、網(wǎng)上下載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格式數(shù)據(jù)，即http://localhost:3000/bar_data
2、傳遞json數(shù)據(jù)生成圖表，http://localhost:3000/bar?ofc=bar_data
2.1生成圖表的url:http://localhost:3000/bar，而?ofc=bar_data表示接收http://localhost:3000/bar_data生成的json數(shù)據(jù)，并傳遞給tt模版
2.2通過data_json參數(shù)傳遞數(shù)據(jù)至tt模版，即data_json=>$data為：data_json=>bar_data。
注：要弄懂此流程，最好先上網(wǎng)搜索swfobject.js和open-flash-chart.swf的作用。

當(dāng)讀者明白此流程后，此網(wǎng)站將是你學(xué)習(xí)open flash chart2繪制各種圖片的demo，特別是給沒有Web應(yīng)用服務(wù)器的用戶帶來很大的便利。
（原因：前文已提到過open flash chart2不能脫離Web應(yīng)用服務(wù)器。）
dancer.pl代碼結(jié)構(gòu)

1. 
   
2. 
   
3.     #!C:\strawberry\perl\bin\perl.exe
   
4.     use Dancer;
   
5.     use MyDancer;
   
6. 
   
7.     set layout=>'main.tt';
   
8. 
   
9.     #生成繪圖所需的json格式數(shù)據(jù)
   
10.     get '/bar_data' => sub {
    
11.         use Chart::OFC2;
    
12. 
    
13.         my $chart = Chart::OFC2->new(
    
14.         ...
    
15.         );
    
16.         return $chart->render_chart_data();
    
17.     };
    
18. 
    
19.     #輸出圖片到網(wǎng)頁，以bar圖為例：
    
20.     #瀏覽器輸入url格式:http://localhost:3000/bar?ofc=bar_data
    
21.     #get '/:type'此時(shí)路徑為：http://localhost:3000/bar
    
22.     #?ofc=bar_data，表示傳遞http://localhost:3000/bar_data生成的json數(shù)據(jù)
    
23.     #通過data_json參數(shù)傳遞數(shù)據(jù)至tt模版，即data_json=>$data為：data_json=>bar_data。
    
24.     get '/:type' => sub {
    
25.         my $type = params->{type};
    
26.         my $title='繪制' . $type . '圖';
    
27.         my $data =$type . '_data';
    
28.         template 'chart'=>{example=>"$title",data_json=>$data};
    
29.     };
    
30. 
    
31.     dance;
    

復(fù)制代碼

對應(yīng)TT模版：

位于views文件夾：chart.tt

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

復(fù)制代碼

四、一個(gè)真實(shí)的例子繪制bar 圖：
dancer.pl代碼：

1. 
   
2. 
   
3.     use Dancer;
   
4.     use MyDancer;
   
5. 
   
6.     set layout=>'main.tt';
   
7. 
   
8.     #生成繪圖所需的json格式數(shù)據(jù)
   
9.     get '/bar_data' => sub {
   
10. 
    
11.         use Chart::OFC2;
    
12.         use Chart::OFC2::Axis;
    
13.         use Chart::OFC2::Bar;
    
14. 
    
15.         my $chart = Chart::OFC2->new(
    
16.             'title' => 'Bar chart 示例',
    
17.             x_axis => {
    
18.                 labels => {
    
19.                     labels => [ '1月', '2月', '3月', '4月', '5月' ],
    
20.                 }
    
21.             },
    
22.         );
    
23.         
    
24.         my $bar = Chart::OFC2::Bar->new();
    
25.         $bar->values([ 1..5 ]);
    
26.         $chart->add_element($bar);
    
27.         
    
28.         return $chart->render_chart_data();
    
29.          
    
30.     };
    
31. 
    
32.     get '/bar' => sub {
    
33.         my $title='繪制bar圖';
    
34.         template 'bar'=>{example=>"$title",data_json=>'bar_data'};
    
35.     };
    
36.     dance;

復(fù)制代碼

對應(yīng)tt模版代碼：
位于views文件夾：chart.tt，模版可見上文第三點(diǎn)。
更靈活的dancer：

將以上TT模版另存為chart.tt，我們修改get '/bar' => sub {...}處代碼，可以讓我們統(tǒng)一用chart.tt輸出各種圖片，dancer.pl代碼修改為。

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

復(fù)制代碼

附：本站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. 
   
5. set layout=>'main.tt';
   
6. 
   
7. #首頁，關(guān)于open flash chart2的配置說明
   
8. #use MyDancer;
   
9. 
   
10. #直接由html靜態(tài)文檔生成flash示例
    
11. get '/statepage' => sub {
    
12.     template 'statepage';
    
13. };
    
14. 
    
15. #本站dancer代碼輸出模版
    
16. get '/dancer_code' => sub {
    
17.     template 'd_code';
    
18. };
    
19. 
    
20. #生成bar圖所需的json格式數(shù)據(jù)
    
21. get '/bar_data' => sub {
    
22. 
    
23.     use Chart::OFC2;
    
24.     use Chart::OFC2::Bar;
    
25. 
    
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. };
    
47. 
    
48. #生成3Dbar圖所需的json格式數(shù)據(jù)
    
49. get '/3D_bar_data' => sub {
    
50. 
    
51.     use Chart::OFC2;
    
52.     use Chart::OFC2::Bar;
    
53. 
    
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.     #方式二：寫個(gè)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. };
    
83. 
    
84. #001生成HBar圖所需的json格式數(shù)據(jù)
    
85. get '/HBar_data' => sub {
    
86. 
    
87.     use Chart::OFC2;
    
88.     use Chart::OFC2::HBar;
    
89. 
    
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.         ),
    
95. 
    
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.     );
     
109. 
     
110.     $chart->add_element($hbar);
     
111.     print $chart->render_chart_data();
     
112. 
     
113. };   
     
114. #003生成Line圖所需的json格式數(shù)據(jù)
     
115. get '/Line_data' => sub {
     
116. 
     
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);
     
134. 
     
135.     print $chart->render_chart_data();
     
136. 
     
137. };   
     
138. 
     
139. 
     
140. #004生成pie圖所需的json格式數(shù)據(jù)
     
141. get '/Pie_data' => sub {
     
142. use Data::Dumper;
     
143. 
     
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#<br>#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' ]);
     
158. 
     
159.     $chart->add_element($pie);
     
160.     print $chart->render_chart_data();
     
161. 
     
162. };  
     
163. 
     
164. 
     
165. #生成復(fù)合圖形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);
     
195. 
     
196.     $chart->add_element($bar);   
     
197.     $chart->add_element($line);   
     
198.     print $chart->render_chart_data();
     
199. 
     
200. };   
     
201.   
     
202. #get '/bar' => sub {
     
203. #    my $title='繪制bar圖';
     
204. #    template 'chart'=>{example=>"$title",data_json=>'bar_data'};
     
205. #};
     
206. 
     
207. #輸出圖片到網(wǎng)頁，以bar圖為例：
     
208. #瀏覽器輸入url格式:http://localhost:3000/bar?ofc=bar_data
     
209. #get '/:type'此時(shí)路徑為：http://localhost:3000/bar
     
210. #?ofc=bar_data，表示傳遞http://localhost:3000/bar_data生成的json數(shù)據(jù)
     
211. #通過data_json參數(shù)傳遞數(shù)據(jù)至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. };
     
221. 
     
222. 
     
223. 
     
224. dance;

復(fù)制代碼

附：其他圖表

py

圖表的庫很多，這種類型的庫已經(jīng)很不流行了，因?yàn)楹馁M(fèi)太多后臺資源。
現(xiàn)在都是純js的庫，后臺把數(shù)據(jù)以JSON的形式扔到前端，前面的JS庫負(fù)責(zé)所有其他的操作

pitonas

膜拜！LZ很贊啊！

aef25u

回復(fù) 2# py
open flash chart 應(yīng)該正是像你所說的方式（通過swfobject.js文件）實(shí)現(xiàn)繪制flash圖表的。Chart::OFC2是用moose寫的構(gòu)造繪制圖表所需josn結(jié)構(gòu)數(shù)據(jù)的模塊。分析源碼還可學(xué)習(xí)moose的oop實(shí)現(xiàn)。


   

py

回復(fù) 4# aef25u

看了一下，是的，open flash chart是這樣的。
我之前是看你在dancer中鼓搗了好多代碼，以為是需要借助Chart::OFC2來生成graph。  不過那么多代碼就是為了生成json。。。。。

我是之前比較過graph library（主要是性能和功能），這個(gè)open flash chart是被我第一個(gè)叉掉的。后來選了amcharts，用了一段時(shí)間，最終換了highcharts。你可以看看highcharts的demo  http://www.highcharts.com/demo/

   

laputa73

amcharts好像也全面轉(zhuǎn)向 html5了
以前的flash版的頁面都沒了

py

回復(fù) 6# laputa73

flash chart流行過一陣兒，這幾年很少再有flash的圖標(biāo)了，和HTML5,JS,SVG的圖標(biāo)相比flash缺點(diǎn)很多。就連美觀程度flash都已完全沒有優(yōu)勢