ま、適当に。moduleはこんな感じ。
package HighCharts::Column; use strict; sub draw { my $self = shift; # draw header my $header = &header($self); my $story; my $cnt; # draw data foreach my $data(@{$self->{y_values}}) { if( $cnt++ ne 0 ) { $story .= "\t\t\t\t,\n"} $story .= &story ( $data ); } # drawa footer my $footer = &footer; my $js = $header.$story.$footer; output($self,$js); } sub header { my $self = shift; my $header = ' '; $header = <<_HEADER_; var char; \$(document).ready(function() { chart = new Highcharts.Chart( { chart: { renderTo: 'chart_column_$self->{id}', defaultSeriesType: 'column' }, title: { text: '$self->{title}' }, subtitle: { text: '$self->{subtitle}' }, xAxis: { categories: [ $self->{x_values} ], title: { text : '$self->{xaxis_title}' } }, yAxis: { title: { text: '$self->{yaxis_title}' } }, series: [ _HEADER_ return($header); } sub story { my $data = shift; my $story =<<_STORY_; { name :'$data->{name}', data : [ $data->{data} ] } _STORY_ return($story); } sub footer{ my $footer = <<_FOOTER_; ] }); }); _FOOTER_ } sub output{ my ($self,$js)=@_; open( OUT, ">$self->{file}") or die( "Cannot open file: $self->{'file'}" ); print OUT $js; close OUT; } package HighCharts::Column;
で、スクリプトではこんな感じで値を与える。
#!/usr/local/bin/perl use strict; use warnings; use HighCharts::Column; my @y_data = ( { name=> 'y1' , data=> "10,3,2"},{ name=> 'y2' , data=> "1,3,2"} ); my %sample = ( id => 'テスト', title => 'TiTle', subtitle => 'Sub TiTle', x_values => "10,12,1", xaxis_title =>"xaxis_title", yaxis_title =>"yaxis_title", y_values => \@y_data, file => "./js/test.js", ); HighCharts::Column::draw(\%sample); exit;
基本的に外部JSに吐き出す形。複数枚の呼び出しが可能なように複数ファイルかつ、複数rendorとなるようにIDをつけて吐き出す。
まあ、複数ファイルを吐き出すのは簡単だが複数を表示するとブラウザ負荷が結構来るんだけど。
タイトル、サブタイトル、X軸タイトル、Y軸タイトル、Xの値、Yの値とこれだけあれば必要最低限は網羅出来てるかなと思う。元々(仕事用には)、Text:Xslateを使っていてテンプレートもそれで書いてたりはするのだが、適当にハードコート。
オプションで外部JSに他の設定も追加で書けるので装飾も兼ねた部分はそちらでいいのではと割り切った実装としている。
基本自分用のためエラー処理とかないw
仕事場ではまあ円グラフもかけるようにしてたりするしすでに物はあるんだが。moduleの作り方をきちんと読んで作っているわけではないのでその辺はゆっくり作りたいかなーとか思ったり。
04 /
01 / 03 / 05 / 06 /
07 / 08 / 09 / 10 /
01 / 02 / 03 / 04 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 05 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /