r5 - 2013-12-02 - 09:33:02 - LuzLunaYou are here:Foswiki>Sandbox Web>MojoliciousImager
editattachsettingsACLs

add
print raw
historyrenamedelete
children new

GD나 Image::Magick 같은 모듈들은 라이브러리 디펜던시때문에 설치하기가 쉽지 않은데비해 Imager 모듈들은 디팬던시 걱정 없이 간단히 설치되면서 성능도 좋다고 알려져있습니다. Imager모듈의 파생 모듈들중 하나로 그래프를 손쉽게 그려줄 수 있는 Imager::Graph 모듈을 소개해볼까 합니다.

cpanm이 이미 설치되어 있다고 가정하고 시작합니다.

먼저 Mojolicious 를 설치합니다.
$ cpanm Mojolicious
--> Working on Mojolicious
Fetching http://www.cpan.org/authors/id/S/SR/SRI/Mojolicious-4.57.tar.gz ... OK
Configuring Mojolicious-4.57 ... OK
Building and testing Mojolicious-4.57 ... OK
Successfully installed Mojolicious-4.57 (upgraded from 4.16)
1 distribution installed

그리고 Imager 를 설치합니다.
$ cpanm Imager
--> Working on Imager
Fetching http://www.cpan.org/authors/id/T/TO/TONYC/Imager-0.97.tar.gz ... OK
Configuring Imager-0.97 ... OK
Building and testing Imager-0.97 ... OK
Successfully installed Imager-0.97
1 distribution installed

$ cpanm Imager::Graph::Column
--> Working on Imager::Graph::Column
Fetching http://www.cpan.org/authors/id/T/TO/TONYC/Imager-Graph-0.10.tar.gz ... OK
Configuring Imager-Graph-0.10 ... OK
Building and testing Imager-Graph-0.10 ... OK
Successfully installed Imager-Graph-0.10
1 distribution installed

라이브러리 디펜던시 문제로 설치에 실패했을 경우 플랫폼별Imager설치가이드 여기를 참고하면 됩니다.

그래프 그리기.

use Mojolicious::Lite;
use Imager::Graph::Column;
use utf8;

get '/' => sub {
    my $self = shift;

    $self->stash(
            title  => '제목',
            width  => 600,
            height => 400,
            data   => [42, 30, 33, 32, 38, 44, 39],
            y_max  => 50,
            y_min  => 0,
            labels => [qw(Mon Tue Wed Thu Fri Sat Sun)],
    );
    graph($self);
};

app->start;

sub graph {
    my $self = shift;
    my $font = Imager::Font->new(file => '/home/bilbo/.fonts/malgun.ttf');  # 폰트의 위치를 정확히 찍어주어야 합니다. 한글 출력을 위해 맑은고딕 폰트를 다운받아 이용했습니다.
    my $graph = Imager::Graph::Column->new();
    my $y_max = $self->stash->{y_max} // 20;
    my $y_min = $self->stash->{y_min} // 0;

    my $delta = 1;
    my $ticks = 9999;
    my $count = 0;
    while ($ticks > 10 && $count < 100) {
        $y_max = int(($y_max + (9 * $delta)) / (10 * $delta)) * (10 * $delta);
        $y_max = 10 if $y_max < 10;
 
        $y_min = int(($y_min - (9 * $delta)) / (10 * $delta)) * (10 * $delta);
        $y_min = 0 if $y_min > 0;
 
        $ticks = int(($y_max - $y_min) / (5 * $delta)) + 1;
        if ($ticks > 10) {
            $ticks = int(($y_max - $y_min) / (10 * $delta)) + 1
        }
 
        if ($ticks > 20) {
            $delta *= 10;
        }
 
        $count++;
    }
 
    $graph->add_data_series($self->stash->{data});
 
    $graph->set_style('fount_lin');
    $graph->show_horizontal_gridlines();
    $graph->use_automatic_axis();
    $graph->set_y_max($y_max);
    $graph->set_y_min($y_min);
    $graph->set_y_tics($ticks);
    $graph->set_image_width($self->stash->{width}  // 600);
    $graph->set_image_height($self->stash->{height}  // 400);
 
    my $img = $graph->draw(
        column_padding => 20,
        labels         => $self->stash->{labels},
        title          => $self->stash->{title} // 'Untitled',
        font           => $font,
        hgrid          => { style => "dashed", color => "#888" },
        graph          => { outline => { color => "#F00", style => "dotted" }, },
        fills          => [ qw(60ff60 a0a0ff) ],
    ) or die $graph->error;
 
    my $data;
    $img->write( data => \$data, type => 'png' )
        or die "could not write image: $!";

    $self->render(data => $data, format => 'png');
};

브라우저에서 http://127.0.0.1:3000/ 으로 접속해보면... 근데 색이 참 촌스럽네요.... 아무래도 Imager::Graph 로 예쁜 그래프 만드려면 쉽지 않겠네요. (그런데 이걸 왜 소개한거지?? 죄송 ㅜ.ㅠ)

imager.png

작년도 http://www.catalystframework.org/calendar/2012/19 을 Mojolicious::Lite 버전으로 한번 바꿔봤습니다. ^^;

그럼 이제부터 좀 바꿔서 다른 그래프를 그려보겠습니다. 그래프를 그리는 코드는 cpan에 딸린 문서에 나온 샘플코드를 살짝 바꿨습니다.

use Mojolicious::Lite;
use Imager::Color;
use Imager::Graph::Line;
use utf8;

get '/' => sub {
    my $self = shift;

    my $font = Imager::Font->new(file => '/home/bilbo/.fonts/malgun.ttf');
    my $graph = Imager::Graph::Line->new();
    $graph->set_style('primary');
    $graph->set_image_width(600);
    $graph->set_image_height(400);
    $graph->set_font($font);
    $graph->use_automatic_axis();
    $graph->show_legend();
    $graph->set_title('제목');

    my @data = (42, 30, 33, 32, 38, 44, 39);
    my @data2 = (12, 35, 22, 18, 8, 14, 38);
    my @data3 = (10, 25, 21, 10, 18, 24, 32);
    my @labels = qw(Mon Tue Wed Thu Fri Sat Sun);

    $graph->add_data_series(\@data, '1번');
    $graph->add_data_series(\@data2, '2번');
    $graph->add_data_series(\@data3, '3번');
    $graph->set_data_line_colors( [qw(0000FF FF0000)] );
    $graph->set_labels(\@labels);

    my $img = $graph->draw() || die $graph->error;

    my $data;
    $img->write( data => \$data, type => 'png' )
        or die "could not write image: $!";

    $self->render(data => $data, format => 'png');
};
app->start;

graph2.png

Imager::Graph::Line 를 Imager::Graph::Area 로 바꿔보았습니다... graph area.png

이번에는 Imager::Graph::Line 를 Imager::Graph::StackedColumn 으로 바꿔보았습니다. 아.. 색이 정말 촌스럽네요. graph stackedcolumn.png

그래서 색을 좀 바꿔보겠습니다. 중간에 아래와같은 코드를 추가한뒤 다시 보면...

$graph->set_data_area_fills( [qw(0000FF 0000AA 000055)] );

graph stackedcolumn horror.png

헉 이거뭐야 무서워....

아무래도 이번 캘린더 기고는 실패 ㅜ.ㅠ

Upload files

Target topic:

File:
Comment:

-- LuzLuna - 2013-11-18
Topic revision: r5 - 2013-12-02, LuzLuna
 
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback