Ads
![Perfume 3rd Tour 「JPN」 [Blu-ray]](https://images-fe.ssl-images-amazon.com/images/I/51FejoskbGL._SL75_.jpg "Perfume 3rd Tour 「JPN」 [Blu-ray]")
![結成10周年、メジャーデビュー5周年記念! Perfume LIVE@東京ドーム『 1 2 3 4 5 6 7 8 9 10 11』 [Blu-ray]](https://images-fe.ssl-images-amazon.com/images/I/51xaKbRjkiL._SL75_.jpg "結成10周年、メジャーデビュー5周年記念! Perfume LIVE@東京ドーム『 1 2 3 4 5 6 7 8 9 10 11』 [Blu-ray]")
![Perfume First Tour『GAME』 [Blu-ray]](https://images-fe.ssl-images-amazon.com/images/I/41FOSnOwb6L._SL75_.jpg "Perfume First Tour『GAME』 [Blu-ray]")
![Fan Service bitter Normal Edition [Blu-ray]](https://images-fe.ssl-images-amazon.com/images/I/31-dWhZJcZL._SL75_.jpg "Fan Service bitter Normal Edition [Blu-ray]")
![Perfume Second Tour 2009『直角二等辺三角形TOUR』 [Blu-ray]](https://images-fe.ssl-images-amazon.com/images/I/51gXD9zEwGL._SL75_.jpg "Perfume Second Tour 2009『直角二等辺三角形TOUR』 [Blu-ray]")
![Perfume『BUDOUKaaaaaaaaaaN!!!!!』 [Blu-ray]](https://images-fe.ssl-images-amazon.com/images/I/51kbMBorQWL._SL75_.jpg "Perfume『BUDOUKaaaaaaaaaaN!!!!!』 [Blu-ray]")
2011 Sat 16 Jul
Highcharts::Column中身
シンプルに
package Highcharts::Column;
use strict;
use warnings;
our $VERSION = '0.0.2';
sub new {
my $class = shift;
my $self = $class->_init();
return bless $self, $class;
}
sub set_data{
my $self = shift;
my %properties = @_;
while (my($key, $value) = each(%properties)) {
$self->{$key} = $value ;
}
}
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 .= " ,\n"}
$story .= &_story ($data);
}
# drawa footer
my $footer = &_footer;
my $js = $header.$story.$footer;
return($js);
}
sub _init {
my $class = shift;
my @y_data =(
{ name=> 'y1' , data=> "1,2,3"},{ name=> 'y2' , data=> "3,2,1"}
);
my $self = {
id => 'Sample',
title => 'Title',
subtitle => 'Sub Title',
x_values => "1,2,3",
xaxis_title => "xaxis title",
yaxis_title => "yaxis title",
y_values => \@y_data,
};
return bless $self, $class;
}
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_
}
ま、このライブラリの需要自体はあるのかと言えば、少ないだろうなーとは思う。Highcharts、Perlで発言してる人捜すとなんか見当たらないしｗ
use Highcharts::Column;
my $foo = Highcharts::Column->new();
my @y_data = ({ name=> 'y1' , data=> "10,3,2"},
{ name=> 'y2' , data=> "1,3,2"}
);
my %config =
id => 'Test',
title => 'TiTle',
subtitle => 'Sub TiTle',
x_values => "10,12,1",
xaxis_title =>"xaxis_title",
yaxis_title =>"yaxis_title",
y_values => \@y_data,
);
my $result = Highcharts::Column->new();
$result->set_data(%sample);
my $js = $result->draw();
print $js;
こんな感じで中身を表示できる。外部JSに保存して読み出すとかそのままソースに書き込むかは利用者による感じで。
permlink
category：スクリプト
HighChartsのJS生成ライブラリ方針
permlink
category：スクリプト
2011 Mon 23 May
HighChartsのコラムを自動生成
ま、適当に。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に他の設定も追加で書けるので装飾も兼ねた部分はそちらでいいのではと割り切った実装としている。
基本自分用のためエラー処理とかないｗ
仕事場ではまあ円グラフもかけるようにしてたりするしすでに物はあるんだが。moduleの作り方をきちんと読んで作っているわけではないのでその辺はゆっくり作りたいかなーとか思ったり。
permlink
category：スクリプト
2011 Thu 28 Apr
電力表示のグラフは
主となるソースは下記。
var char;
$(document).ready(function() {
chart = new Highcharts.Chart(
{
chart: {
renderTo: 'chart_test3',
},
title: {
text: '東京電力電力メータ4/26'
},
subtitle: {
text: 'サブタイトル'
},
xAxis: {
categories: ["0:00","1:00","2:00","3:00","4:00","5:00","6:00","7:00","8:00","9:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"],
title:{
text : '時間帯'
}
},
yAxis: {
title: {
text: '供給電力(万kW)'
}
},
series: [
{
type : 'area',
name :'ピーク供給量',
data : [ 4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,],
},
{
type : 'column',
name :'当日実績(万kW)',
data : [ 2426,2343,2315,2295,2297,2344,2568,2758,3008,3198,3229,3240,3062,3257,3241,3209,3229,0,0,0,0,0,0,0, ],
},
{
type : 'line',
name :'前日実績(万kW)',
data : [ 2509,2402,2350,2299,2270,2217,2271,2359,2469,2566,2601,2604,2605,2582,2564,2563,2610,2717,2960,3025,2965,2870,2750,2602, ]
},
]
});
});
まあ、ここまでの整形はcsvを読み込んでperlでやっているのだが。
permlink
category：スクリプト
2011 Mon 25 Apr
東京電力のデータをグラフ化
HighChartsの勉強も兼ねてちとデータ化
元はPerlで書いてjsファイルに書き出しといったことをしている。
真面目に作ればまあ公開されてるデータを読み込んで整形して利用した上でグラフ化というのもできなくはない。
amchartsの方がいいのかもなあと思いつつ、あの設定ファイルの煩雑さには参るわ。
highchartsの設定ファイルの方が直感に近いのでそっちで実装を進めてしまった。
HighChartsでは凡例をクリックすると表示のオン・オフがリアルタイムにできる。そこがデータを見るときには便利でEXCELとかでは代用は効かないなと感じているところ。
