Open Flash Chartで印象的なグラフを作ろう

 Web用に高品質のグラフを作るのは難しいものだが、それが簡単に作れるオープンソース・ソフトウェアがある。Open Flash Chart(OFC)だ。その名から察せられるように、OFCのコア・エンジンはAdobe Flashで書かれている。したがって、Webページを開いた人がOFCで作ったグラフを見るにはFlashプラグインが必要になる。しかし、作る側にとっては、プロ品質のグラフを最小限の労力で作ることができるという大きな利点がある。グラフの作成で苦労する部分はコア・エンジンが引き受けてくれるため、グラフの構成オプションの設定とデータ入力に専念できるからだ。

 OFCを使うには、WebサーバーにPHPがインストールされている必要がある。したがって、インストールする場合は、PHPがインストールされていることを確認すること。インストールされていたら、OFCの最新版を入手し、WebサーバーのrootディレクトリにOFCのためのディレクトリ(以下、openflashchartとする)を作り、ダウンロードしたパッケージからopen-flash-chart.swfファイルとphp-ofc-libraryフォルダをそのディレクトリにコピーする。以上でインストールは完了だ。

 それでは、早速、既存の.php Webページにグラフ・オブジェクトを追加してみよう。まず、次のPHPコードをWebページに挿入する。

<?php
include_once 'php-ofc-library/open_flash_chart_object.php';
open_flash_chart_object( 600, 300, 'http://'. $_SERVER['SERVER_NAME'] .'/openflashchart/chart-data.php', false );
?>

 ここで、open_flash_chart_object.phpファイルとchart-data.phpファイルへのパスを間違えないように。また、グラフの大きさはこのコードで指定した幅と高さの値によって決まるので、適宜設定してほしい。

 このコードで指定されていない設定とグラフのデータは、open_flash_chart_objectで指定されたファイル(上の例ではopenflashchartディレクトリのchart-data.php)で設定する。したがって、次にすべきことは、このファイルの作成とデータおよび構成オプションの設定だ。初心者用に、簡単な折れ線グラフを作ることにしよう。まず、テキスト・ファイルを作り、次のコードを入力する。

&title=Downloads,{font-size: 21px;}&
&y_ticks=5,10,6&
&line=5,#9932CC&
&values=12,41,29,35,4,30,18,13,31,5,26,26&
&x_labels=Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec&
&y_min=0&
&y_max=60&

 ご覧のように、データ・ファイルの構造はさほど複雑ではない。最初のtitleオプションではグラフの表題とフォントの大きさなどの外見を指定する。次のように、フォントと背景の色、マージン、パディングなどを指定することもできる。

&title=Downloads,{font-size: 19px;color: #9932CC; margin:10px; padding: 5px 15px 5px 15px;}&

OpenFlashChart_thumb.png
OpenFlash Chart

 次のy-ticksパラメーターはY軸上の目盛りの数(上の例では6)と大きさ(5と10)を指定する。y_minオプションとy_maxオプションはY軸の最小値と最大値、lineオプションは折れ線の太さと色、valuesパラメーターはその値だ。valuesパラメーターには負の値を指定することもできるが、それに合わせてy_minパラメーターの設定を変更すること。x_labelsオプションはX軸の目盛りに付けるラベルを指定する。Y軸に凡例を付けたいときは、y_legendパラメーターで、凡例のテキスト、フォントの大きさ、色を指定する。

&y_legend=Thousands,11,#9932CC&

 設定が終わったら、chart-data.phpというファイル名でopenflashchartディレクトリに保存する。そして、グラフ・オブジェクトを埋め込んだWebページをブラウザで開いてみよう。グラフがきれいに描かれているはずだ。

 OFCには、これ以外にもたくさんのパラメータやオプションがあり、思い通りのグラフを作ることができる。たとえば、複数の系列から成る折れ線グラフなら、次のように、必要なだけのlineパラメーターと値を並べるだけで描くことができる。

&line=3,#9932CC,Ubuntu, 9&
&line_2=3,#458B00,Mandriva, 9&
&y_legend=Thousands,11,#9932CC&
&values=12,41,29,35,4,30,18,13,31,5,26,26&
&values_2=25,57,12,18,4,23,21,47,51,37,21,47&

 このlineパラメーターには、折れ線の太さと色のほかにラベルとフォントの大きさも指定されている。折れ線だけでは不満という人はline_dotとline_hollowというパラメーターを使えばデータの位置に小さな点または円(下の例で、最後の数字が点の大きさを表す)を付けることができる。

&line_dot=3,#9932CC,Ubuntu,9,7&
&line_hollow_2=3,#458B00,Mandriva,9,7&

 このほか、x_axis_colour、x_grid_colour、y_axis_colour、y_grid_colour、bg_colourなどのパラメータが用意されており、これらを使えばグラフのほぼあらゆる部分の属性を指定することができる。bg_colourパラメータを使えば、グラフの背景をグラフィックにすることすらできる。(パラメータ名の綴りが英国式である点に注意)

 折れ線以外のグラフも描ける。たとえば、棒グラフならchart-data.phpファイルのlineパラメーターをfilled_barにする。

&filled_bar=50,#9933CC,#8010A0,Downloads,10&

 最初の数字は棒の透明度を表し、以下、デフォルトの色と強調時の色、凡例、フォントの大きさだ。filled_barの代わりにbar_fadeパラメータを使えば、フェード効果を付けて描くこともできる。

&bar_fade=55,#9933CC,Downloads,10&

 ガラスのような光沢を付けたければ、filled_barの代わりに、次のパラメータを使う。

&bar_glass=55,#D54C78,#C31812,Downloads,10&

 円グラフを描くのも同じように簡単だ。データ・ファイルの構造は折れ線グラフや棒グラフのものとは少し違うが、やはり理解するのは容易だ。

&title=Word Processors,{font-size:18px; color: #d01f3c}&
&pie=60,#000000,#000000&
&values=12,9,8,5,10&
&pie_labels=Microsoft Word,OOo Writer,AbiWord,KWord,Scribus&
&colours=#D01f3C,#7D26CD,#458B00,#356AA0,#C79810&

 上の例では、pieパラメータで、グラフの透明度、線の色、ラベルの色を指定している。colours(これも綴りは英国式)は円グラフを構成する各項目(扇形)の色だ。

おわりに

 以上、OFCが持っている機能のごく一部分を紹介した。ここに挙げた簡単な例だけからでも、OFCは素晴らしいソフトウェアであり、いろいろなことができることが想像できるだろう。OFCのWebサイトにはさらに多くの例があるので見てほしい。PHPでデータ・ファイルを作る方法についての解説もある。OFCにはJava、Perl、Ruby on Rails、Pythonのためのヘルパー・クラスも用意されているので、自作アプリケーションの中でOFCを使うこともできる。

Dmitri Popov フリーライター。ロシア、英国、米国、ドイツ、デンマークのコンピューター雑誌で活躍している。

Linux.com 原文