FusionCharts で見事なグラフを作成

内容に関係なく、派手なビジュアルトリックに感銘を受けやすい上司はいますか?あなたはマーケティングのような人ですか？ウェブサイトを所有していて、素晴らしいフラッシュ グラフでページを活気づけたいですか?静的な Web ページを超えるオンライン プレゼンテーション ツールが必要ですか?次に、FusionCharts を見てください。

FusionCharts は、美しいアニメーションの Flash グラフとチャートを Web プロジェクトに統合できる Flash グラフ作成ソフトウェアです。 FusionCharts は、面グラフ、棒グラフ、円グラフ、縦棒グラフ、散布図など、さまざまな 2D および 3D グラフを提供します。これらはすべて、プレーンな HTML ファイルまたは ASP、PHP、Ruby on Rail、Python、およびその他の Web で使用できます。技術。 FusionCharts は、SQL や Oracle などのデータベースでも動作します。

FusionCharts は、InfoSoft による多くの製品の 1 つです。その他の製品の中には、ダッシュボード用の Flash ウィジェット、Flash マップ、および Adob​​e Flash、Dreamweaver、FileMaker、Visual Basic、Google Gadgets 用のインタラクティブ チャートがあります。

これらのプログラムはすべて有料ですが、FusionCharts には無料バージョンもあります。ペイウェア ソリューションほど強力ではありませんが、FusionCharts Free はほとんどのホーム ユーザーにとって十分です。さらに、シェアウェア スタイルの透かしのブランド化がなく、非常に邪魔になりません。

興味をそそられましたか？それでは、FusionCharts のセットアップ方法をお見せしましょう。このチュートリアルでは、しばらく試用できる FusionCharts v3 を使用して説明します。まあ、私はすべての法的側面をあなたに任せます.両者の比較については、次のページをご覧ください。

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

FusionCharts をダウンロードするには、登録する必要があります。アーカイブをマシンにダウンロードしたら、ダウンロードした zip ファイルを任意のフォルダーに展開します。

最初のステップ

FusionCharts を抽出したフォルダーを開きます。かなりの数のサブフォルダーが含まれていることがわかります。

ファイル は、最初の Web プロジェクトを作成し、その中で FusionCharts を使用するのに役立つドキュメント/ヘルプ ファイルです。説明を読むのに少し時間を費やす必要がありますが、私の記事をざっと読むこともできます.

プロジェクトを作成する

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

注:フリーウェア バージョンのユーザーもスクリプトを利用できます。ただし、利用可能なチャート タイプのコレクションは少なくなります。詳細については、上記の比較を参照してください。

もちろん、実際にこれを行う必要はありません。任意のディレクトリを使用し、Web プロジェクトの場合と同様に、Web コードで相対パスを使用して適切なファイルを指すことができます。ただし、FusionCharts を初めて使用するときは、Web ページ、スクリプト、および Flash チャートがすべて同じフォルダーにある方が簡単です。

次のステップは、グラフのデータをコピーして作成することです。 FusionCharts では、XML をデータ コンテナーとして使用する必要があります。

データの作成

無料版では、テキスト エディターを使用して自分でファイルを作成する必要があります。フル機能の v3 では、XML ジェネレーター ユーティリティを使用できます。これは、設定を HTML または関連コードに自動的に変換できるため、非常に便利です。

XML ジェネレーターは Tools サブフォルダーにあります。

任意の方法でデータを入力します。完了したら、[XML に変換] をクリックします。

データが XML 形式で表示されます。前述したように、メモ帳などのテキスト エディターを使用して、自分でファイルを作成することもできます。実際、コードをテキスト エディターにコピーし、ファイルを something.xml として保存する必要があります。

FusionCharts ガイドでは、ファイルを Data.xml と呼ぶことを推奨しています。 HTML ファイルを自分で編集することに慣れていない場合は、既定の名前を使用する必要があります。それ以外の場合は、任意の名前を使用できます。

[グラフの構成] をクリックして、グラフのルック アンド フィールをカスタマイズします。チャートと軸のタイトルとサブタイトルを追加したり、カラー パレットを変更したり、グラフに値を表示したり、その他の関連するプロパティを表示したりできます。

次に、[HTML の生成] をクリックしてファイルを作成します。ここで、グラフの種類を選択できます。この値は、先ほどコピーした SWF ファイルを直接指しているため、Charts サブフォルダーからチャート ファイルのサブセクションのみをコピーした場合は、それらがプロジェクト フォルダーにあることを確認してください。そうしないと、プロジェクトは実際には機能しません。あるべき場所に画像ファイルがないのと同じです。

グラフの幅と高さを変更することもできます。 HTML コードを変更することで、後で手動で調整できます。

最後に、内容をテキスト エディターにコピーして、独自の HTML ファイルを作成します。好きなように呼んでください。詳細については、ダウンロードしたパッケージに含まれている ファイルを参照してください。

データの確認

ファイルを見てみましょう。 Data.xml ファイルは次のとおりです:

ご覧のとおり、これは標準の XML です。必要に応じて、またはその方法を知っている場合は、このファイルを直接編集できます。値とキーを変更したり、チャートのキャプションなどを編集したりできます。

HTML ファイルは次のとおりです:

私たちのファイルがあります。必要なビットは、FusionCharts チャートの開始コードと FusionCharts チャートの終了コードの 2 つのコメントの間に含まれています。必要なプロジェクトにコピーできます。 .js ファイル、.swf ファイル、チャート サイズなどへの相対パスに注意してください。これらはすべて、必要に応じてカスタマイズできます。それでは、FusionCharts でできることを見てみましょう。

見事なグラフ

2D と 3D のパイがいくつかあります:

別の例、3D バー:

これらの素敵なチャートが Web ページに統合されたときにどのように見えるかを見てみましょう。チャートの前後にいくつかのテキストがあり、非常にまともな記事になっています:

ここで最も優れている点は、グラフを操作したり、回転させたり、データのビットを分離したり、あらゆる種類のクールなトリックを実行できることです。もちろん、すべての作業を機能させるには、Javascript を有効にし、Flash プラグインをインストールする必要があります。

グラフには、読み込み時の素敵な入り口のアニメーションもあり、スタイルが追加されます. Wink を使用して記録したものは次のとおりです:

ミニサマリー

結論に進む前に [原文のまま]、FusionCharts を起動して実行するために実行する必要がある手順の短いリストを次に示します。

• アーカイブをダウンロードして展開します。
• Flash ファイル (Chart 内の .swf 形式) と Javascript ファイル (JSClass 内の .js) をプロジェクト ファイルにコピーします。 1 つのフォルダーまたは複数の場所を使用できます。知識の少ないユーザーは、単一の統合されたプロジェクト フォルダーを使用する必要があります。
• グラフ データを作成し、それをテキスト ファイルにコピーして、Data.xml として保存します。
• HTML コードを作成してカスタマイズし、テキスト ファイルにコピーして保存します。好きなように名前を付けてください。関連するすべてのファイルの場所には、相対パスまたは絶対パスを使用できます。上級ユーザーは、必要に応じてセットアップを微調整します。
• 新しく作成した HTML ファイルを Web ブラウザ内にロードして、クールなチャートを楽しんでください。キー、値、キャプション、サイズ、タイプ、パレットを必要に応じて変更します。

ご覧のとおり、FusionCharts のセットアップはプラグ アンド プレイの取引ではありませんが、確実に実行可能です。なんらかの Web デザインに既に精通している場合、オンライン プレゼンテーション テクノロジを使用するつもりなら、なぜそうしないのでしょうか。FusionCharts を使用するのは簡単です。あなたが初心者の場合、あなたの前にいくつかの作業がありますが、うまくいけば、私のチュートリアルでそれが簡単になりました.

結論

FusionCharts は間違いなく便利でユニークなテクノロジーです。オンライン プレゼンテーションをすばやく簡単に充実させることができます。何よりも、FusionCharts を使用するためにコード マスターである必要はありません。骨の折れる作業はすでに完了しており、あとはこれらの派手なグラフを Web ページにうまく配置するだけです。

Wink やおそらく Slidy と組み合わせると、ごちそうになります。真剣に考えている場合は、完全な有料版の購入を検討することもできます.

このチュートリアルを楽しんでいただけたでしょうか。またね。

乾杯。