ユーザープロフィール

ゲストさん

業務に、自作のWebサービスに。Web用グラフライブラリ×30種

業務に、自作のWebサービスに。Web用グラフライブラリ×30種

システムは最終的に何らかのデータをアウトプットします。例えば請求書などの帳票であったり、レポートとして出力される場合もあります。レポートで出力される場合も、テーブル組の一覧表として出す場合もあれば、データの変動を追うグラフを出力する場合もあります。

一覧表で数字だけを追いかけても見えてこないトレンドがグラフにすると一目で分かるというのはよくあることです。そしてWebシステムでは特に苦手な分野と言えます。そうした面倒さを幾分にでも軽減できるライブラリをまとめて紹介したいと思います。

Flash

まずグラフ出力の代表としてFlashがあります。HTML5に載せ変わりつつありますが、まだまだ利用は多いです。Flashはシステムとの連携時にXMLを出力して行われることが多いです。

amCharts - 要注目!Flash製グラフ

Pie & Donut chartはFlash製のグラフです。amChartsは円グラフ、線グラフ、棒グラフそしてX-Yグラフの4つに大別されるグラフ機能を提供しています。amChartsへのリンクをつけることでフリーで利用できます。そのグラフ機能は非常に高いです。見た目の綺麗さもありますが、マウスでの操作(円グラフはクリックするとその部分だけが離れる、線グラフはマウスで指定した範囲だけを拡大表示できる)やマウスオーバー時の数字表示等があります。また、それだけではありません。JavaScriptとの連携を意識しており、ダイナミックにグラフの表示内容や背景色を変更できます。

FusionCharts Free - オープンソース化したFlashを使ったグラフライブラリ

FusionCharts Freeはグラフの表示にXMLを用います。そのためサーバサイドの技術に依らないグラフ表示が可能です。とは言え、PHP、Perl、JSP、.NETなど多数の言語向けにグラフ表示用のライブラリを提供しています。この点も見逃せありません。表示できるグラフの種類は数多いです。棒グラフや線グラフ、円グラフはもちろん2D/3Dもこなします。複数のグラフを一緒に表示することが可能で、2Dと3Dを混ぜることもできます。株価チャートのような形式や、ガントチャートの描画もできます。

BirdEye - Flashベースのグラフ化ライブラリ

BirdEyeはFlash製のグラフライブラリですが、その機能は実に多彩になっています。あまり簡易的なグラフを描くのには向かないかも知れありませんが、逆に高度なものを必要とする際にはぜひチェックしてください。棒グラフや円グラフ等の一般的なグラフはもちろん、家系図のようなグラフを描くこともできます。もちろんFlashを使っているので動的に表示を変更するインタラクティブなグラフを描くこともできます。棒グラフと範囲グラフ、折れ線グラフを吹く動的に組み合わせるようなものを作成可能とあって、高機能なグラフを描きたい用途にはぴったりです。

PHP/SWF Charts - 華麗なFlashベースのグラフライブラリ

PHP/SWF ChartsはXMLファイルを読み込んで、その結果をFlashとして表示してくれます。棒グラフ、円グラフ、2D、3D、ミックスしたグラフなど様々なグラフが描画できます。全く別なグラフを並べて表示する機能もあります。これだけ多くのパターンに対応していれば、まず大抵の需要は満たせるのではないでしょうか。PHP/SWFとなっていますが、特にPHPが必須というわけではなく、対応したXMLやパラメータを出力できれば他のプログラム言語でも利用できます。ただしPHPのライブラリが付属しているので、それを利用すると手軽に利用できるようになっています。

Axiis - Flexを使ったデータビジュアライザ

AxiisはデータをFlexでグラフ化するソフトウェアです。多彩なデモが用意されているのでぜひ見てください。単なる棒グラフや円グラフなどではない、複雑なグラフを描くことができます。データはMXMLで定義するのでサーバが限定されてしまうのが難点ですが、それだけにビジュアル品質の高いグラフが描けています。円グラフ、棒グラフ、範囲グラフなどがベースにはなりますが、よりグラフィカルで見た目のインパクトも大きいグラフが作成できます。データの範囲や拡大/縮小などを使ってダイナミックに見た目を変更することができます。

jQuery

jQueryプラグインのグラフライブラリも数多くあります。jQueryを使って開発をしているならばぜひ検討してほしいです。

Arbor - 関連性をビジュアル化するのに使えるjQuery製グラフライブラリ

Arborは幾つかのハブがあり、そのハブから枝が伸びて別なハブにつながっているようなビジュアル化を行います。表示して終わりという訳ではなく、常にゆらゆらと動いています。さらにハブをドラッグして移動させることもできます。その時には関連するハブも干渉して動きます。クリックして別なノードを表示することもできます。データはJSONで定義するようになっていますので、システムからデータを取得してArborでビジュアル化してみると思っていたのとは違う結果が得られて面白いかも知れません。なおJavaScriptの処理についてはWeb workersを使っているとのことで、技術的にも興味深いソフトウェアです。

Peity - 使い道色々。jQueryを使ってSparklineグラフを描く

Sparklineとは一行程度の小さなグラフで、縦軸横軸の説明は行いません。そのような説明がなくとも十分理解できるグラフについて使われます。ごく小さいので文章中に埋め込むのも容易です。Peityでは円グラフ、折れ線グラフ、棒グラフの三種類を描くことができます。タグの中に埋め込まれた文字を使ってグラフにしてくれるのが特徴です。例えば2/10という文字であれば20%の円グラフになります。0.52/1.561のように割合は気にせず作れるのが便利です。棒、折れ線グラフも数値は気にせず表記してしまえばPeityが自動的に良いグラフにしてくれます。使いどころは多そうです。

jQuery Sparklines - インラインで表示される小さなグラフ

jQuery Sparklinesでは一般的な折れ線グラフの他、棒グラフ、円グラフ、組み合わせたグラフなどがさくせいできます。ごく小さなグラフだけに表示の分かりやすさ、シンプルさにこだわりが見られます。JavaScriptベースであるために、ダイナミックな変化をするグラフも作成できます。公式サイトのデモでは、マウスのスピードをグラフ化したり、データやサイズを変更できるグラフが掲載されています。

jqPlots - jQueryベースのグラフ作成ライブラリ

jqPlotsはCanvasタグを使っていますが、対応ブラウザはIE6〜IE8、Firefox、Safari、Operaとなっています。筆者環境では試していませんが、IE6でも恐らく大丈夫でしょう(ぜひ試してください)。これだけ多数のブラウザに対応していれば一般向けWebサービスでも使えそうです。描画できるグラフは点のみのプロット、折れ線グラフ、曲線グラフ、棒グラフ(縦横)、トレンドグラフなどです。さらにドラッグアンドドロップでプロット位置を変えたり、オンマウスで値を表示することもできます。

JavaScript

jQueryでなくともJavaScriptベースのグラフライブラリが実に多様です。特に最近ではHTML5と絡めてCanvasやSVGを使ってグラフィカルに出力するものが多数あります。Canvasを使っていても、外部ライブラリによってレガシーブラウザ(IE6など)に対応しているものもあります。

Timeplot - 圧巻!AJAX+DHTMLのグラフライブラリ

Timeplotは単純な二次元の折れ線グラフ用のライブラリで、非常に細かく描画が行われる。特にグラフの上をマウスでなぞった時に各数値が表示されるのが素晴らしいです。同じプロジェクトの年表を作り出すTimeline形式をサポートしています。場合によって使い分けたり、見せ方を変えたりと便利に使えそうです。グラフに備考をつけることもでき、特定の場所をクリックすると説明文が表示されます。サンプルは数多く登録されているので、ぜひ見てください。AJAXとDHTMLだけでここまで出来るのかと驚いてしまうはずです。

jStat - 解析データの、グラフ化に。JavaScript製統計解析ライブラリ

jStatでは多様な統計解析を行うライブラリです。描画にCanvasを使っているのでHTML5をサポートしたモダンなWebブラウザがサポート対象になっています。またjQueryを使っています。線で描画することも、ポイントでプロットすることも(または両方も)できます。ポイントの数も自由に設定可能です。複数のデータを同時に描画したり、線の中を塗りつぶすこともできます。さらにJavaScriptと連携してマウスの載せた場所の値を表示する機能もあります。多様なグラフをこなせる訳ではありませんが、解析系のWebアプリケーションを開発する際には便利に使えるライブラリになるでしょう。

Protovis - Canvasを使った複雑なグラフも描画するライブラリ

Protovisは簡単なグラフから、複雑なグラフまで難なくこなせるライブラリです。欠点としてはCanvasを使っていることでFirefox3、Chrome、Safari4のみがサポート対象となってしまうことでしょう。使う場面は選ばざるをえませんが、それ以上のメリットが見いだせるでしょう。円グラフと棒グラフを組み合わせたり、折れ線グラフを使って棒グラフの色分けをする、地層のようなグラフや複数の要素が絡んだ散布図など様々です。スパークラインも描くことができます。

Smoothie Charts - リアルタイムにスムーズなグラフを描く

Smoothie Chartsはリアルタイムに変化するデータをスムーズに描画していくライブラリです。一つに限らず複数の線を同一グラフ内に描画することができます。例えばシステムのモニタリングであったり、アクセス数の変化などを追うのに使えそうです。canvasタグを使っているため、対応していないブラウザでは表示できないのが欠点ではあります(SafariまたはChromeが対象となっています)。とは言えこのようなリアルタイム描画を行うライブラリは限られるので、必要とする場面は多いのではないでしょうか。

dygraphs JavaScript Visualization Library - SVGを使ったものすごいグラフライブラリ

dygraphs JavaScript Visualization Libraryはとても簡単に使えるグラフライブラリになっています。JavaScriptでSVGを描いてグラフ化します。 主なグラフはX-Y軸を持った折れ線グラフになるようです。とはいえ測定範囲を含んだグラフを描いたり、グラフの一部をマウスを使って拡大する、マウスオーバーすると値が表示されるなど高度な機能が盛り込まれています。SVGを利用しているが別ライブラリを使うことでIEでも利用できる点がいいです。さらにお勧めなのが元データとしてCSVファイルが使える点です。XML系のデータファイルを利用するものが多い中、汎用性の高いCSVファイルは便利です。さらにGoogle Visualization APIと互換性があり、クエリーを使って引き出したデータをそのまま描画することもできます。高度な折れ線グラフを必要とする際にはきっと役立つはずです。

SVGGraph - SVGでグラフを生成する

SVGGraphはPHPを使ってグラフを生成します。対応しているグラフは棒グラフ、円グラフ、折れ線グラフ、散布図となっています。棒、円グラフは3D表示にすることも可能です。画像とは異なり、リンクを埋め込むことができたり、値のツールチップを入れることもできます。今のところ表示もシンプルなグラフなので、XMLを使って〜といったほどではないでしょう。だが簡易的なグラフであれば十分表示できるということです。さらにiPhone/iPadにも対応しているのが嬉しいです。今後需要が増すであろう便利なライブラリです。

Flot - JavaScriptを使ってインタラクティブなグラフ

FlotはJavaScriptを使ったグラフ生成ソフトウェアです。FlotはjQueryを使って開発されたライブラリで、インタラクティブなグラフを作成できるのが特徴です。プロットするだけもでき、複数のデータを一つのグラフ上に並べられます。そしてJavaScriptならではの機能として、選択した範囲をハイライトしたり、その部分だけにフォーカスして表示することもできます。データを表示する、しないといった選択もダイナミックに変更できます。JavaScriptを使うメリットは、サーバサイドの要件に依らず利用できる点でしょう。複雑なものには対応していませんが(現状は折れ線、曲線グラフのみ)、簡単なグラフであれば即座に作り出せます。

PlotKit - JavaScriptだけでグラフを生成

PlotKitはJavaScriptベースのグラフ生成ライブラリです。JavaScriptであれば、クライアントベースで完結します。これなら手軽に実装できることは間違いありません。PlotKitではCanvasやSVGを使ってグラフ生成を可能にしています。対応ブラウザはCanvasがSafari 2以上、Opera9以上、Firefox 1.5以上、IE6(エミュレーションモード)で、SVGはOpera9以上、Firefox1.5以上、IE6はSVGプラグインを使って対応となっています(Mac OSXのFirefox1.5は動作しません)。生成できるグラフは、棒グラフ、線グラフそして円グラフとなっています。決して多い訳ではありませんが、よく使われるグラフはこの3つが多いのではないでしょうか。まだ複雑な描画は可能ではありませんが、JavaScriptならではの動的なグラフ変更や色変更ができるのは魅力的です。

WT Toolkit - 超美麗なグラフを描くJavaScriptライブラリ

WT Toolkitはグラフ表示をはじめとするリッチなコンポーネントを提供するJavaScriptライブラリです。まずは何といってもグラフ表示機能でしょう。デモで見られるのは3D円グラフ、棒グラフさらにレーダーチャートなど。どれもWebブラウザ上で動的に変更できます。ただし日本語はグラフ上は文字化けするので注意してください。他にもツリービューや表計算風シートのデモ等、JavaScriptで作られているとは思えないほどレベルの高いコンポーネントが数多く登録されています。

Bluff - 要チェック!テーブルからグラフを生成するJavaScriptライブラリ

BluffはJavaScriptのライブラリで、画像形式(PNG)のグラフを生成します。棒グラフ、円グラフ、エリアグラフ、折れ線グラフなど様々なグラフ形式をサポートしています。背景色を変えたり、複数のデータを描画できるなど多機能なライブラリです。そして面白いのはdata_from_tableというメソッドです。これはHTMLタグのテーブルで描かれているデータを指定することで、グラフのプロットを行う機能です。これを使えばグラフ生成とテーブル表示と二回に分けてデータを作成する必要もありません。

LT Diagram Builder - JavaScriptによる多彩なグラフライブラリ

LT Diagram BuilderはJavaScriptベースのグラフ生成ライブラリです。LT Diagram Builderが対応しているのは棒グラフ、折れ線グラフ、関数グラフ、矢印、円グラフ、ガントチャート等多彩な描画に対応しています。ダイナミックな描画にも対応しており、関数の値を変更すれば、即座にグラフに反映することができます。JavaScriptの強みでしょう。また、PHPやASPでのグラフ生成にも対応しています。結果的に出力されるのはJavaScriptのようですが、サーバサイドのデータを使って容易にグラフが作れるのは嬉しいです。

PHP

各プログラミング言語向けにグラフライブラリはありますが、今回はPHP向けのライブラリを紹介します。

Image_Graph - PHPでグラフを作るなら

Image_Graphは元々、GraPHPiteというライブラリで、PEARへの登録を行う上でImage_Graphに名前が変わったようです。公式サイトには数多くのサンプルが掲載されているのでぜひ見てください。直線的なものや滑らかな曲線のもの、二軸のグラフや複数の種類のグラフを重ねることもできます。また、背景は単色だけでなく画像を指定してすかして表示することも可能です。尚、利用にはGDライブラリが必要になります。

pChart - PHPベースのグラフ生成ライブラリ

pChartは折れ線グラフ、面グラフ、棒グラフなどを画像として生成することができます。細かな指定ができ、各要素が離れた円グラフ、なんてことやポインタに画像を使ったりすることもできます。もちろん複数の要素を同時に表示したり、折れ線グラフと面グラフを合わせるなんてこともできます。PHP単独で作られているので、PHPでシステムを構築している場合は組み込むのが容易にできそうです。フォントも予め幾つか用意されています。恐らく日本語フォントを入れれば日本語出力もできるでしょう。CSVファイルからデータを呼び出してグラフを作成することもできるので、既存システムとの結合を疎にしながら利用できるでしょう。PHPのWebシステムにグラフが欲しくなったら使ってみてください。

Libchart - PHP用グラフライブラリ

Libchartが対応しているグラフは、円グラフ、棒グラフ(縦/横)、折れ線グラフとなっています。要素をひとつずつ追加していくだけで、簡単にグラフの作成ができます。なお、そのままでは日本語が文字化けするので注意してください。フォントを日本語TTFに入れ替えて試してもうまくいかなかったので、もしかすると多少の変更が必要になるかも知れません。シンプルで簡単に使いこなせるグラフライブラリ。システム開発でグラフを作成する際に備えて覚えておいてください。

その他

それ以外のグラフライブラリも実に多様です。

OpenHeatMap - ExcelやCSV、Googleドキュメントで簡単に時系列変化型ヒートマップを実現

OpenHeatMapではCSVやExcelファイル、Googleドキュメントのスプレッドシートを読み込んでヒートマップ化することができます。データは三列で、左から住所(地域名でも良い)、年数、そして値となっています。これだけ作れば後はアップロードするのみです。ヒートマップは地図上に情報の密度によって色が変わって表示されます。さらにそれが時系列のスライダーによって変化しながら表示されます。位置情報を細かく指定することもないので、とても簡単です。様々な情報がビジュアル化できそうです。

Visifire - Silverlightを使ったブラウザベースのグラフライブラリ

VisifireはSilverlightベースのグラフライブラリです。Adobe AIRなどに対抗して(?)開発されているSilverlightですが、いまいち流行ってはいません。Windowsに標準で入ってくるようになれば状況も変わってくるでしょうが、それまではあまり安易に利用することはできないでしょう。ですがキラーアプリケーションもそろそろ登場してくるはずです。Silverlightの使い方で、こんなものもあったのかと思わされるのがこのVisifireです。Silverlightをインストールしたブラウザであれば、多機能で見た目も良いグラフが容易に得られるようになります。データはXMLベースなので、他のプログラム言語との連携も容易です。作成できるグラフは数多く、2D棒グラフ、3D棒グラフ、折れ線グラフ、円グラフ、横棒グラフ、エリアグラフ、ドーナッツグラフ、割合グラフ、散布図そして各グラフの組み合わせたものができます。

ChartDroid - Android用のグラフライブラリ

ChartDroidはAndroid用アプリに組み込めるグラフライブラリで、緑系を基調としたグラフはAndroidのイメージにもマッチしています。現時点では円グラフのみとなっていますが、今後バリエーションは増えていくものと思われます。

Eastwood - Google Chart APIコンパチブルなグラフ生成

EastwoodはJavaのグラフ生成ライブラリであるJFreeChartを使ってグラフを生成します。その際のパラメータがGoogle Chart APIをエミュレートし、高い互換性を維持しているのが特徴です。3Dの円グラフ、横/縦棒グラフ、背景画像、散布図など、様々なグラフを生成できます。グラフはPNGが造形式です。テスト用のHTMLファイルでは隣にGoogle Chart APIで作ったものを並べて表示するほど意識が高いです。配布はWarファイルを配置するだけで完了します。利用は簡単で、URLをchart.apis.google.comをlocalhost:8080/eastwoodに変更するだけで良いです。

Time Series Graph - Googleファイナンスのグラフ風

Time Series GraphはGoogle Financeのグラフ風ライブラリです。Time Series GraphはActionScript3を使って作られています。仕組みを簡単に言うと、上にグラフがあり、下に表示するスパンを指定する機能がつきます。この下のスパンで表示する前後を指定すれば、その間のグラフが表示される仕組みです。折れ線グラフの他に、棒グラフの部分もあり、それらはマウスオーバーすると連動して表示が変わります。現状ではGoogle Financeのようにニュース発表日に旗が立つといった機能はないようです。

Sparklines for Microsoft Excel - Sparklinesをエクセルで

Sparklines for Microsoft ExcelはMicrosoft Office 2000または2003向けに作られたアドオンですが、2007でも動作しました。棒グラフ、線グラフ、円グラフをはじめとして10種類を越えるグラフに対応しています。標準の機能で小さなグラフを作る場合、X軸やY軸、項目の説明などを外して縮小すればできないことはありません。ですがSparklines for Microsoft Excelはセルの中に収まるのです。関数と同じように記述するだけでグラフが生成されるので、慣れれば下方向コピーなどを使って一気に作成することもできてしまいます。

gHeat - Googleマップに映し出すヒートマップ

gHeatはPythonで作られたWebサーバであるAspenを用いて提供されます。他にPygameも必要です。gHeatをAspenを使って立ち上げると、ポート番号8080でアクセスできるようになります。アクセスすると、アメリカを表示し、そこにヒートマップをレイヤーとして重ねて表示します。例えば人口の図であったり、スタートアップ企業の数であったりと、表示することで面白いデータが得られるものは多そうです。表示するポイントに関するデータはSQLite3を使って管理しています。その結果をgHeatを通してPNG画像に変換し、Googleマップのレイヤー上に投影するという仕組みです。通常のマップ上にアイコンを載せるのとはまた違う面白さがありそうです。

まとめ

グラフと一言で言っても実に色々な種類があります。棒、折れ線、円、レーダー、散布図、ヒートマップなどなど。さらに複数軸を持てるものや、時系列を絡められるものなどがあります。自分の利用目的に合っているかどうかは実際に触ってみないと分からない場合が多数あります。多様なグラフに対応しているライブラリを使えば大抵の目的には利用できますが、それでもうまくいかない場合もあります。そうした時にはやはり限定的な利用しかできないライブラリを使わざるを得ません。まずはここで紹介したソフトウェアを頭の片隅に入れておき、必要になった時に触れてマッチしているかどうか確かめるようにしてみてください。

関連記事

知らないと損する、エクセルのグラフの基本作成方法とおすすめのグラフについて
企画書作成に役立つノウハウ~参考資料、ツール、統計・調査データ検索サイトなど~
プレゼン資料作成ノウハウ~基礎、デザイン、インフォグラフィック、配色、お手本資料など~
少しの工夫でもっと伝わる!グラフデザイン3つのポイント
統計データ作成や分析・集計でマーケターが使うべき4つのExcel関数

PR_infeed

PR_Relative

オウンドメディア運営会社の皆様へ

s

ページトップ