WevCharts3D | [Webチャート3D] デザインから実装まで 統合チャートコンポーネント

スタートガイド

1. はじめに
2. インストール
3. チャートのデザイン
4. テスト
5. プログラムの作成
6. スタイルの変更
7. データの設定
8. 参考資料・その他

1. はじめに

本資料では、次の方にWebCharts3D 5.2Jの導入方法をご紹介します。
・WebCharts3D 5.2J製品版をすでにご購入いただき、お手元に製品パッケージが届いている方
・これからトライアル版を使ってWebCharts3D 5.2Jの評価を行う方
はじめて製品をご利用いただくことを前提に、インストールから、デザイナ上でのチャート設計、Javaアプリケーションでの出力までの手順をご説明します。

なお、この資料では必要に応じて、詳しい説明を記述したドキュメントやWebサイトを紹介していますので、あわせてご確認ください。

2. インストール

すでに製品をご購入いただいた方は、製品CDからインストールを行ってください。
トライアル版をお使いいただく場合、Webサイトからモジュールをダウンロードしてください。

製品CDからのインストール

<cd-rom_root>/webcharts3d/ディレクトリを開き、ターゲットコンピュータのOSに対応したインストーラを起動してください。こちらのリリースノートを参考にインストールを行ってください。

インストール終了後デザイナを起動し、開発ライセンスのシリアル番号を登録してください。シリアル番号は、製品パッケージに含まれている「ユーザー登録確認シート」に記載の16桁の英数字です。 登録方法はリリースノートをご覧ください。

トライアル版のインストール

Webサイトからトライアル版の利用申請を行ってください。

グレープシティからトライアル版モジュールのURLを記載したE-mailが届きます。
モジュールをダウンロードしたらインストーラを起動し、リリースノートを参考にインストールを行ってください。

3. チャートのデザイン

はじめてデザイナを起動すると、さまざまなチャートが並ぶダイアログが表示されます。
これがチャートギャラリーです。

チャートギャラリー


チャートギャラリーには130種以上のテンプレートがあらかじめ登録されています。最も仕様に近いチャートを選び、それを元にデザインできます。完成形に近い状態からスタートして、プロパティを設定していくだけなので、はじめて使用する場合でも戸惑うことはありません。
ギャラリーでいずれかのチャートを選択すると、その内容がデザイナに反映されます。

チャートデザイナ


画面左側のプレビューを確認しながら、画面右側のプロパティを変更していきます。チャートプロパティは、チャートタイプ、Ｘ／Ｙ軸、凡例など、カテゴリごとに配置されています。必要なプロパティがわからない場合は、画面下の［ヘルプ］タブをクリックし、［デザイナ］の項目を参照してください。各プロパティの詳細な説明が掲載されています。

統合開発環境（IDE）でのチャートデザイン

WebCharts3DはEclipseプラグインを備えており、デザイナをEclipseやIBM^® Rational Application Developerに統合できます。これらのIDEをお使いの方は、チャートのデザインとプログラムの開発が同時に行えます。

IDE統合

4. テスト

デザインの次は出力結果のテストを行います。デザインしたチャートをWebブラウザ上で確認できるように、軽量のWebサーバー（ビルトインテストサーバー）がデザイナに組み込まれています。［ファイル］メニューから［プレビュー］をクリックすると、Webサーバーとブラウザが自動的に起動し、チャートを表示します。

ビルトインテストサーバー


デフォルトで表示されるPNG形式に加えて、JPG／SWF（Adobe^® Flash^®）／SVG／PDF／TIF／VML／Canvasの各形式に切り替えられます。アニメーション効果を付加できるSWFとSVGの各形式では、その動作確認も可能です。

ビルトインテストサーバーで表示されるチャートのテストデータは、デザイナ下部の［XMLモデル］タブから変更できます。

XMLモデル


テーブルやXML形式で表示されたデータは、直接変更・追加できます。XMLファイルからデータをインポートできるほか、JDBC経由でデータベースクエリの結果セットを使用できます。これらの機能を使って、運用時と同じデータでテストを行えます。

5. プログラムの作成

ここからは、チャートをユーザーアプリケーションで表示する方法を紹介します。あらかじめこちらの資料を参考に、ランタイムJARファイル（wcruntime.jar）を作成し、アプリケーションのクラスパスに追加しておいてください。

---

WebCharts3Dのデザイナでは、Javaプログラムでチャートを表示するためのソースコードを自動的に生成できます。

ソースコードの自動生成を行うには、デザイナ下部の［コードビュー］タブをクリックしてください。[デザイン]タブで設定したチャートのスタイルに応じて、Javaソースコードが生成されます。

ソースコードの自動生成


画面下部の［プラットフォーム］コンボボックスを使って、実行形態に応じたソースコードに切り替えられます。生成できるソースコードは次の７種類です。

・JSP（JavaServer Pages）直接出力
・JSP（JavaServer Pages）間接出力
・JSPカスタムタグ
・JSF（JavaServer Faces）
・Applet
・Swing
・SWT

サーバーサイドアプリケーションであれば、通常はJSP間接出力を使用してください。JSFやSWTが利用できる環境であれば、それぞれに対応したソースコードを選んでください。クライアントアプリケーションではSwing形式を選択してください。

７種類のソースコードのうちJSP直接出力のみ、単体のJSPファイルとして使用できます。［保存］ボタンをクリックし、アプリケーションサーバーに配備してください。それ以外の出力形式は、いずれもユーザープログラムに貼り付けて使用します。

また、サーバーサイドアプリケーションのServletでチャートを出力する場合、JSP間接出力のコードの一部を利用します。詳細はFAQをご覧ください。

生成されたコードにはデザイナで設定したテストデータも含まれています。ソースコードが正しく実行されれば、Webページやアプリケーションにチャートが出力されます。

6. スタイルの変更

実際のアプリケーションでは、ユーザーの入力内容やデータによって、チャートのスタイルを動的に変更する場合があります。

WebCharts3Dでは、出力するチャート種ごとにスタイル情報を管理するスタイルクラスを用意しています。これらのプロパティを設定すると、チャートのスタイルを変更できます。

チャート種	スタイルクラス
フレームチャート （折れ線・棒・エリア・散布図など）	MxFrameChartStyle
円グラフ	MxPieChartStyle
レーダーチャート	MxRadarChartStyle
統計チャート （ヒストグラム、プロファイル、回帰、タイムライン）	MxStatisticalChartStyle
ゲージ	MxGaugeChartStyle
レベルチャート	MxLevelChartStyle
階調グラフ	MxGradientMapStyle
テーブル	MxTableChartStyle
カラーマップ	MxColorMapStyle
ガントチャート	MxGanttStyle
マップ	MxMapStyle
ツリー	MxTreeStyle

Javaプログラムからスタイルクラスのプロパティを変更する際、（a）WebCharts3D APIを使用する方法と、（b）XML形式のスタイルファイルを読み込む方法があります。

APIを使用すると、個々のプロパティをソースコード上で変更できるため、条件ごとに細かく調整できるメリットがあります。

一方、XMLスタイルファイルを使用すると、実行環境にXMLファイルを配置する作業が発生しますが、ファイルの置き換えだけでデザインを一度に切り替えられます。

変更するプロパティが少ない場合はAPIを、別のチャート種に切り替えるような大きな変更であれば、XMLスタイルファイルを使用してください。

（a）WebCharts3D APIによるスタイルの変更

APIでスタイルを変更するには、スタイルクラスを取得する必要があります。JSPなどのサーバーサイドアプリケーションでは、MxChartDescriptionクラスから取得します。SwingやSWTなどクライアントサイドアプリケーションでは、MxComponentクラスから取得します。

以下のサンプルでは、自動生成されたJSP形式のソースにコードを追加し、MxChartDescriptionクラスから、円グラフ用のスタイルオブジェクトであるMxPieChartStyleクラスに、チャートスタイルを読み込んでいます。プロパティを変更した後、MxChartDescriptionクラスに設定し直しています。

APIによるスタイルの変更

MxServerComponent svr = MxServerComponent.getDefaultInstance(application);
MxChartDescription myChart = svr.newImageSpec();

myChart.width = 800;
myChart.height= 600;
myChart.type = "PNG";
myChart.style = "<?xml version=\"1.0\"（中略） </XML>";
myChart.model = "<?xml version=\"1.0\"（中略） </XML>";

// 変更前のチャートスタイルをスタイルオブジェクトに読み込む
MxPieChartStyle pStyle =
(MxPieChartStyle)MxFrameChartStyle.read( myChart.style , null );

// チャートスタイルのプロパティを変更する
pStyle.legend.isVisible = false;

// 変更後のスタイルを設定し直す
myChart.style = pStyle.toXML();

out.write(svr.getImageTag(myChart,"/getImage.jsp?image="));

ここでは、APIを使って凡例を非表示にしています。

（b）XMLファイルによるスタイルの変更

WebCharts3Dのチャートデザイナでは、設定したチャートのスタイル情報をXMLファイルに出力できます。このXMLファイルを使ってアプリケーション内でチャートのスタイルを切り替えられます。

チャートスタイルを格納したXMLファイルを出力するには、デザイナ下部の［XMLスタイル］タブをクリックしてください。デザイナで作成したスタイル情報がXML形式で表示されます。

XMLスタイルの保存


右下に表示される［保存］ボタンを押すと、表示されている情報をファイルとして保存できます。

保存したXMLファイルは、アプリケーション内で読み込むことができます。以下のサンプルでは、自動生成されたJSP形式のソースにコードを修正し、MxChartDescriptionクラスを経由して、XMLファイルからスタイルを読み込んでいます。

XMLファイルからチャートスタイルの読み込み

MxServerComponent svr = MxServerComponent.getDefaultInstance(application);
MxChartDescription myChart = svr.newImageSpec();

myChart.width = 800;
myChart.height= 600;
myChart.type = "PNG";

// myChart.style = "<?xml version=\"1.0\"（中略） </XML>";

// XMLファイルからチャートスタイルを読み込む
myChart.loadStyles("http://myServer/chart/TestStyle.xml");

myChart.model = "<?xml version=\"1.0\"（中略） </XML>";

out.write(svr.getImageTag(myChart,"/getImage.jsp?image="));

数行のコードだけでチャートスタイルを読み込むことができました。

7. データの設定

チャートに表示するデータに関してもスタイルと同様に、出力するチャート種ごとに管理用のモデルクラスが用意されています。これらのクラスを使って、アプリケーションからチャートにデータを設定します。

チャート種	モデルクラス
フレームチャート （折れ線・棒・エリア・散布図など）	MxStandardChartModel
円グラフ
レーダーチャート
統計チャート （ヒストグラム、プロファイル、回帰、タイムライン）
ゲージ
レベルチャート
階調グラフ
テーブル
カラーマップ
ガントチャート	MxGanttModel
マップ	MxMapModel
ツリー	MxTreeModel

Javaプログラムからモデルクラスを設定する場合も、（a）WebCharts3D APIを使用する方法と、（b）XML形式で読み込む方法があります。

通常はAPIを使って設定を行ってください。データベースからのエクスポートなどで、XMLファイルが簡単に出力できる場合はXMLを使用してください。

（a）WebCharts3D APIによるデータの設定

API経由でデータを設定する場合、はじめにチャート種に対応したモデルオブジェクトを生成します。そのあと、insertCol()やinsertRow()メソッドを使って、作成したモデルオブジェクトに１レコード単位でデータをセットします。最後に、モデルオブジェクトをMxChartDescriptionやMxComponentに設定します。

次のサンプルでは、自動生成されたJSP形式のソースコードを修正し、APIを使ってデータを設定しています。

APIによるデータモデルの設定

MxServerComponent svr = MxServerComponent.getDefaultInstance(application);
MxChartDescription myChart = svr.newImageSpec();

myChart.width = 800;
myChart.height= 600;
myChart.type = "PNG";

myChart.style = "<?xml version=\"1.0\"（中略） </XML>";

//myChart.model = "<?xml version=\"1.0\"（中略） </XML>";

// モデルクラスの作成
MxStandardChartModel model = new MxStandardChartModel();

// 列データの設定
model.insertCol("2000",null,-1);
model.insertCol("2001",null,-1);
model.insertCol("2002",null,-1);

// 行データの設定
model.insertRow("サンプル 0:", new double [] { 100.0, 200.0, 100.0 } ,-1);
model.insertRow("サンプル 1:", new double [] { 150.0, 300.0, 250.0 } ,-1);
model.insertRow("サンプル 2:", new double [] { 470.0, 170.0, 360.0 } ,-1);

// モデルクラスの設定
myChart.model = model.toXML();

out.write(svr.getImageTag(myChart,"/getImage.jsp?image="));

（b）XML形式のデータ設定

データモデルとして使用するXMLは、デザイナで「XMLモデル」タブを選択したとき、画面の下半分に表示されるXMLと同じ形式で作成してください。

たとえば、折れ線や棒グラフなどで使用するMxStandardChartModelでは、以下のような形式で作成します。

<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<XML type=\"default\">
  <COL>2000</COL>
  <COL>2001</COL>
  <COL>2002</COL>
  <ROW col0=\"100.0\" col1=\"200.0\" col2=\"100.0\" col3=\"180.0\">サンプル 0:</ROW>
  <ROW col0=\"150.0\" col1=\"300.0\" col2=\"250.0\" col3=\"230.0\">サンプル 1:</ROW>
  <ROW col0=\"470.0\" col1=\"170.0\" col2=\"360.0\" col3=\"210.0\">サンプル 2:</ROW>
</XML>

MxChartDescriptionやMxComponentなどのクラスでは、いったんXMLファイルに保存したデータの読み込みや、文字列からの直接取り込みが可能です。

次のサンプルでは、自動生成されたJSP形式のソースコードを修正し、ファイルに保存されたXMLデータを読み込んでいます。

XMLファイルからのデータモデルの設定

MxServerComponent svr = MxServerComponent.getDefaultInstance(application);
MxChartDescription myChart = svr.newImageSpec();

myChart.width = 800;
myChart.height= 600;
myChart.type = "PNG";

myChart.style = "<?xml version=\"1.0\"（中略） </XML>";

//myChart.model = "<?xml version=\"1.0\"（中略） </XML>";

// XMLファイルからのデータの読み込み
myChart.linkTo("http://myServer/chart/TestModel.xml");

out.write(svr.getImageTag(myChart,"/getImage.jsp?image="));

8. 参考資料・その他

参考資料一覧

WebCharts3Dには、オンラインヘルプをはじめとするさまざまなドキュメントが付属します。また、グレープシティのWebサイトでも、開発に役立つ情報を公開しています。

WebCharts3Dに関連する情報をまとめてご紹介します。