Ads

2011 Sat 16 Jul

HighChartsのJS生成ライブラリ方針

Highcharts.JS[http://www.highcharts.com/]をより使いやすくするためのライブラリ(Perl Module)

HighchartsのJSを自動で書き出すようにするライブラリです。 詳細オプションはHighcharts.JS[http://www.highcharts.com/]を見ればわかるように 多岐にわたりますので基本的に外部JSで個別に設定するものとします。

本体JSの中身

    var char;
    $(document).ready(function() {
        chart = new Highcharts.Chart(
        {
            chart: {
                renderTo: 'chart_column',  // ←　ここの名前で各グラフを書き分け
                defaultSeriesType: 'column'　// ←line,column,pie,area等でグラフ書き分け
            },
            title: {
                text: 'TiTle'
            },
            subtitle: {
                text: 'Sub TiTle'
            },
            xAxis:  {
                categories:  [ 10,12,1 ],
                title:  { 
                    text : 'xaxis_title'
                }
            },
            yAxis: {        
                title: {
                    text: 'yaxis_title'
                }
            },
            series: [
                { 
                    name :'y1',
                    data : [ 10,3,2 ]
                }
                ,
                { 
                    name :'y2',
                    data : [ 1,3,2 ]
                }
                ]
        }); 
    });

複数のグラフを書き分けることを想定するとrenderTo: "hogehoge"とし変数とすることが必要。 さらに、タイトル、サブタイトル、x軸タイトル、y軸タイトル、x軸値、 ｙ軸値、ラベル名が最低限必要と判断する。

求める機能は上記情報を基本的な引数としてJSファイルを書き出す機能。

GD::Graphのように画像に出力しているわけではないので複数枚描くと マシンパワー及びブラウザの能力に大きく依存する。 （１００個JS描写と１００個の画像表示では大きく違う。）

デザインの多くが恐らくCSS依存の部分があるためOS間、ブラウザ間での見栄えに 差異がある。 GD::Graphのようにサーバ依存ではなくクライアント依存となる。 xの数（x1,x2,x3)とyの数[(y11,y12,y13),(y21,y22,y23)]は同じ値の数。

amChartsも同様のツールとしてあるが、設定ファイルの煩雑さを感じたのでHighchartsで実装。 機能等の差異はあるので個人の好みもあるだろう。 値ごとにグラフの形式を変えて復号グラフとすることもできる。多少複雑になる。

GD::Graphでは画像をファイルに出力しそれを表示するのが通常。 本ライブラリでは当初JSのファイル出力まで作ってみたけど、出力系は別途あるべきだし、シンプルな実装が良いと判断したのでJSの中身を返すというシンプルな形での実装とした。

続く

permlink

category：スクリプト

« ハリーポッター　死の秘宝Part２観てきたー | Main |Highcharts::Column中身 »