Webページ上への簡単グラフ描画ツール

　「Web ページ上にグラフを掲載したい！」というニーズをお持ちの方が読者の中には必ずいらっし
ゃることと思います。
グラフ作成に使用するデータの更新頻度が低いのなら，Excel などを使ってローカル環境でグラフ
を作成し，その画像ファイルを Web ページに掲載するというのも手ですが，動的に変化するデータ
を用いてグラフを作成する必要がある場合には，事前に画像ファイルを用意する方法ではグラフを
Web ページに追加することはできません。
そのような場合に役に立つのが，
Flash や JavaScript を用いてグラフを描画する無償のツールです。
筆者が必要に迫られて探したグラフ描画ツールの中から，綺麗なグラフを簡単に作成できるものを
ここでは二つ紹介します。
まず一つ目は，
Flash を利用してグラフ描画を行うFusionCharts（http://www.fusioncharts.com/）
です。無償版 FusionCharts Free では 22 種類のグラフ作成が可能で，棒・円・線・面積グラフな
ど基本的なグラフはもとより，図
（a）
のグラフ描画サンプルに示すように，ロウソク足，ガントチャー
ト，漏斗グラフも描画することができます。
グラフを作成するには，グラフ作成用 Flash の SWF ファイルを Web サイトからダウンロード，グ
ラフ作成用データを XML ファイルとして用意した上で，グラフを挿入したい Web ページの HTML
ファイル上に SWF・XML ファイルの置き場所を指定するだけで，簡単にグラフを Web ページ上に
追加することができます。紙面上では伝えられませんが，棒グラフがにょきにょきと伸びるアニメー
ションが表示されるなど，単にグラフの画像ファイルを貼るのとは違う Web ページを作成すること
が可能です。英語のみですが詳細なオンラインの説明書が用意されていますので，ご覧ください。
この FusionCharts を使った Web ページを表示するためには，閲覧者が Flash を表示する環境を
持っている必要がありますが，最近，携帯用端末などで Flash を使ったページを表示できないものが
増えてきました。 そこで， 次に紹 介するのは JavaScript を使 ってグラフ描 画を行う Highcharts
（http://highcharts.com/）です。HTML5 と呼ばれる HTML の仕様に含まれている Canvas 要素を
使用してグラフ描画を行っているため，閲覧者の環境に依存せずにグラフ描画を行うことができま
す。この Highcharts は，非商用サイトでは無償で利用することができます。
Highcharts では棒・円・線・面積グラフを作成することができ，FusionCharts と同様にアニメ
ーション表示を通してグラフが描画されます。使用法は，FusionCharts と比べると少々手間がかか
りますが，グラフのタイトル・軸設定・グラフ表示するデータなどを JavaScript のコードで記入し
たものを用意すると，Web ページ上にグラフが描画されます。
Ｗｅｂページ上への簡単グラフ描画ツール
80
皆様も，これらのグラフ描画ツールを使用して，印象的にデータを表現することができる Web ペ
ージを作ってみてはいかがでしょうか。
（東北大学　井上 亮）
（a）
FusionCharts（http://www.fusioncharts.com/）
（b）
Highcharts（http://highcharts.com/）
グラフ描画ツール　Webサイトとグラフ描画サンプル
THE JOURNAL OF SURVEY 測量 2010.8 35