FusionChartsで見事なFlashグラフを作成する方法|無料版から始める導入チュートリアル

派手なビジュアル演出に、中身に関係なくつい感心してしまう上司はいませんか?マーケティング担当の方ですか?自分のWebサイトを持っていて、ページに華やかなFlashグラフを加えて活気づけたいと考えているなら?静的なWebページにとどまらないオンラインプレゼンテーションツールが必要ですか?そんな方こそ、FusionChartsをチェックすべきです。

※補足: 本稿で扱うFlash技術は、2020年12月にAdobeによるサポートが終了しています。現在は本チュートリアルの手順をそのまま再現できないため、歴史的な解説として、あるいはChart.jsやHighchartsなど後継となるHTML5チャートライブラリを学ぶ際の考え方の参考としてお読みください。

FusionChartsは、見た目が美しくアニメーション付きのFlashグラフやチャートをWebプロジェクトに組み込めるチャート作成ソフトウェアです。エリア、バー、パイ、縦棒、散布図など、幅広い種類の2D・3Dチャートを提供しており、いずれもプレーンなHTMLファイルはもちろん、ASP、PHP、Ruby on Rails、Pythonなどの各種Web技術と組み合わせて利用できます。SQLやOracleといったデータベースとの連携にも対応しています。

FusionChartsはInfoSoft社が提供する数多くの製品の一つです。同社のラインナップには、ダッシュボード向けのFlashウィジェットや、Adobe Flash、Dreamweaver、FileMaker、Visual Basic、Googleガジェット向けのFlashマップやインタラクティブチャートなども含まれています。

これらの製品は有料ですが、FusionChartsには無料版も用意されています。有料版ほど多機能ではないものの、FusionCharts Freeは一般の個人ユーザーにとって十分な性能を備えています。しかもシェアウェア特有の透かしやブランド表示がない、非常に気軽に使える仕様です。

興味が湧きましたか?それでは、FusionChartsのセットアップ方法をご紹介しましょう。このチュートリアルでは、試用期間のあるFusionCharts v3を使用します。ライセンス面については各自でご確認ください。有料版と無料版の比較については、公式の比較ページをご覧ください。

ダウンロードとセットアップ

FusionChartsをダウンロードするにはユーザー登録が必要です。アーカイブをPCに保存したら、zipファイルをお好みのフォルダに展開してください。

最初のステップ

FusionChartsを展開したフォルダを開いてみましょう。かなり多くのサブフォルダが含まれていることに気づくはずです。

というファイルはドキュメント兼ヘルプファイルで、初めてのWebプロジェクトの作成方法と、その中でFusionChartsを使う手順を解説してくれています。公式ドキュメントを読む時間を取るのも良いですが、本記事を読みながら進めても構いません。

プロジェクトの作成

まず、プロジェクト用のディレクトリを作成します。作成したら、Chartsサブフォルダ内のすべてのファイルをプロジェクトフォルダにコピーしてください。これらのファイルはSWF形式です。次に、JSClassフォルダからFusionCharts.jsファイルをプロジェクトフォルダにコピーします。

注意: 無料版にも同様のスクリプトが付属しています。ただし、利用できるチャートの種類は有料版より少なくなります。詳しくは前述の比較ページをご参照ください。

もちろん、必ずしもこの構成に従う必要はありません。任意のディレクトリを使い、通常のWebプロジェクトと同じように相対パスでファイルを指定しても問題ありません。ただし、初めてFusionChartsを使う段階では、Webページ・スクリプト・Flashチャートをすべて同じフォルダに置いておく方が格段に楽です。

次のステップは、チャート用データの準備です。FusionChartsでは、データの入れ物としてXMLを使用する必要があります。

データの作成

無料版では、テキストエディタを使って自分でXMLファイルを作成します。一方、フル機能のv3では「XML Generator Utility」が使えるので非常に便利です。入力した設定を自動的にXMLや関連コードへ変換してくれます。

XML GeneratorはToolsサブフォルダにあります。

データを自由に入力し、完了したら「Convert to XML」をクリックします。

すると、データがXML形式で表示されます。先ほど触れたとおり、メモ帳などのテキストエディタで自分でファイルを作ることも可能です。実際には、生成されたコードをテキストエディタに貼り付け、「〜.xml」という名前で保存することになります。

FusionChartsの公式ガイドでは、ファイル名をData.xmlにすることが推奨されています。HTMLファイルを自分で編集するのに自信がない方は、デフォルト名を使うのが安全です。慣れている方なら、任意の名前を付けても問題ありません。

「Configure Chart」をクリックすると、チャートの見た目をカスタマイズできます。タイトルやサブタイトル、軸ラベルの追加、カラーパレットの変更、グラフ上への値の表示など、関連する各種プロパティを調整できます。

続いて「Generate HTML」をクリックしてHTMLファイルを生成します。ここでチャートタイプを選択できます。この設定値は先ほどコピーしたSWFファイルを直接参照しているため、Chartsサブフォルダから一部のファイルだけをコピーした場合は、必要なファイルがすべてプロジェクトフォルダにあることを確認してください。欠けているとプロジェクトは正常に動作しません。画像ファイルが所定の場所にない場合と同じ理屈です。

グラフの幅と高さもここで変更できます。後からHTMLコードを直接編集して調整することも可能です。

最後に、生成されたコードをテキストエディタにコピーし、独自のHTMLファイルとして保存します。ファイル名は自由です。詳細については、ダウンロードパッケージに同梱されているを参照してください。

データの確認

それでは、作成したファイルを確認してみましょう。こちらがData.xmlファイルです。

ご覧のとおり、標準的なXMLです。編集方法がわかるなら、このファイルを直接書き換えてもOKです。値やキーの変更、チャートのキャプションの編集などが自由に行えます。

続いて、HTMLファイルを見てみましょう。

これが私たちのファイルです。必要なのは「Start Code for FusionCharts chart」と「End code for FusionCharts chart」という2つのコメント行の間のコードです。この部分を任意のプロジェクトにコピーできます。.jsファイルや.swfファイルへの相対パス、チャートのサイズなどを確認してください。これらはすべて好みに合わせてカスタマイズ可能です。それでは、FusionChartsの実力を見てみましょう。

素晴らしいグラフの数々

さあ、完成です。実に華やかな出来栄えです。まずは2Dと3Dのパイチャートから:

別の例として、3Dバーチャート:

さらに、これらの美しいチャートを実際のWebページに組み込むとどうなるか見てみましょう。チャートの前後に文章を配置すれば、かなり見栄えのする記事になります。

何より嬉しいのは、グラフがインタラクティブに操作できる点です。回転させたり、データの一部を切り離したりと、さまざまなクールな演出が可能です。もちろん、動作させるにはJavaScriptが有効で、Flashプラグインがインストールされている必要があります。

また、グラフは読み込み時に美しい登場アニメーションを再生し、ページ全体に洗練された印象を与えます。Winkで録画したデモがこちらです。

ミニまとめ:セットアップ手順のおさらい

結論に入る前に、FusionChartsを動かすまでに必要な手順をリストにまとめておきます。

• アーカイブをダウンロードして展開する。
• Flashファイル(.swf、Chartsフォルダ内)とJavaScriptファイル(.js、JSClassフォルダ内)をプロジェクトフォルダにコピーする。1つのフォルダでも複数の場所でも構いませんが、初心者は1つの統一されたプロジェクトフォルダにまとめるのがおすすめです。
• チャートデータを作成し、テキストファイルに貼り付けてData.xmlとして保存する。
• HTMLコードを作成・カスタマイズし、テキストファイルに保存する。ファイル名は自由です。関連ファイルの指定には相対パス・絶対パスのどちらも使えます。上級者は設定を思いどおりに調整しましょう。
• 作成したHTMLファイルをWebブラウザで開き、クールなチャートを楽しむ。キー、値、キャプション、サイズ、チャートタイプ、パレットを用途に合わせて変更できます。

ご覧のとおり、FusionChartsのセットアップはプラグ&プレイとはいきませんが、十分実現可能な作業量です。何らかのWeb制作経験がある方なら(オンラインプレゼンテーション技術を使おうとする時点で、おそらく経験はあるはず)、FusionChartsの扱いはとても簡単に感じられるでしょう。初心者の方には多少の学習コストがありますが、このチュートリアルがその負担を軽減できれば幸いです。

結論

FusionChartsは間違いなく有用でユニークな技術です。オンラインプレゼンテーションを、迅速かつ簡単に華やかにしてくれます。何より嬉しいのは、コーディングの達人である必要がないという点です。面倒な下回りの作業はすでに済ませられており、私たちがやるべきことは、完成されたグラフをWebページにうまく載せることだけです。

Wink、さらにはSlidyと組み合わせれば、表現力の高いプレゼンテーション環境が手に入ります。本気で業務に取り入れるなら、フル機能の有料版の購入を検討する価値も十分にあるでしょう。

このチュートリアルを楽しんでいただけたなら幸いです。それではまた。