スタートガイド

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

1. はじめに

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

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

2. インストール

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

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

インストールプログラムは、製品CDのwebcharts3dディレクトリに格納されています。ターゲットコンピュータのOSに対応したインストールプログラムを起動し、画面の指示に従ってインストールを行ってください。

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

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

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

[ダウンロード]-[トライアル版]-[Java製品]はこちら

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

3. チャートのデザイン

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

画像「チャートギャラリー」拡大
チャートギャラリー

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

画像「チャートデザイナ」拡大
チャートデザイナ

画面左側のプレビューを確認しながら、画面右側のプロパティを変更していきます。チャートプロパティは、チャートタイプ、X/Y軸、凡例など、カテゴリごとに配置されています。必要なプロパティがわからない場合は、画面下の[ヘルプ]タブ、または「開発者ガイド」を参照してください。各プロパティの詳細な説明が掲載されています。

関連ドキュメント
《デザイナヘルプ》 [デザイナ] → [デザイン]
《開発者ガイド》 6. チャートスタイル
《開発者ガイド》 7. 共通スタイル

Eclipseでのチャートデザイン

WebCharts3Dはデザイナの機能をEclipseに統合するためのプラグインを備えています。Eclipse上でチャートのデザインとプログラムの開発が同時に行えます。

画像「Eclipseとの統合」拡大
Eclipseとの統合
関連ドキュメント
《導入ガイド》 Eclipseプラグインの利用

4. テスト

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

画像「ビルトインテストサーバー」拡大
ビルトインテストサーバー

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

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

画像「XMLモデル」拡大
XMLモデル

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

関連ドキュメント
《デザイナヘルプ》 [デザイナ] → [コンソール]
《デザイナヘルプ》 [デザイナ] → [XMLモデル]
《開発者ガイド》 3.1 デザイナの操作方法

5. プログラムの作成

ここからは、チャートをユーザーアプリケーションで表示する方法を紹介します。アプリケーションの実行時には、ランタイムJARファイル(wcruntime.jar)をクラスパスに追加してください。

WebCharts3Dのデザイナでは、Javaプログラムでチャートを表示するためのソースコードを自動的に生成できます。ソースコードの自動生成を行うには、デザイナ下部の[コードビュー]タブをクリックしてください。[デザイン]タブで設定したチャートのスタイルに応じて、Javaソースコードが生成されます。

画像「ソースコードの自動生成」拡大
ソースコードの自動生成

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

  • JSP(JavaServer Pages)直接出力
  • JSP(JavaServer Pages)間接出力
  • JSPカスタムタグ
  • JSF(JavaServer Faces)
  • Applet
  • Swing
  • SWT

7種類のソースコードのうちJSP直接出力は、個別のJSPファイルに保存する必要があります。それ以外の形式は、通常、ユーザープログラムに貼り付けて使用します。

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

アプリケーションの開発手順の詳細については「開発者ガイド」を参照してください。

関連ドキュメント
《開発者ガイド》 4. サーバーサイドアプリケーションの開発
《開発者ガイド》 5. クライアントサイドアプリケーションの開発

6. スタイルの変更

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

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

チャート種 スタイルクラス
フレームチャート
(折れ線・棒・エリア・散布図など)
MxFrameChartStyle
円グラフ MxPieChartStyle
レーダーチャート MxRadarChartStyle
ゲージ MxGaugeChartStyle
統計チャート
(ヒストグラム、プロファイル、回帰、タイムライン)
MxStatisticalChartStyle
ガントチャート MxGanttStyle
マップ MxMapStyle
テーブル MxTableChartStyle
カラーマップ MxColorMapStyle
ヒートマップ MxGradientMapStyle
レベルチャート MxLevelChartStyle
ダイヤルチャート MxDialChartStyle
ツリー MxTreeStyle
スライド MxSlideStyle
ウィンドローズチャート MxWindRoseChartStyle
3D面チャート MxSurfaceChartStyle

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

APIを使用すると、個々のプロパティをソースコード上で変更できるため、条件ごとに細かく調整できるメリットがあります。一方、XMLスタイルファイルを使用すると、実行環境にXMLファイルを配置する作業が発生しますが、ファイルの置き換えだけでデザインを一度に切り替えられます。

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を使って凡例を非表示にしています。

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

WebCharts3Dのチャートデザイナでは、設定したチャートのスタイル情報をXMLファイルに出力できます。この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="));

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

関連ドキュメント
《開発者ガイド》 6. チャートスタイル

7. データの設定

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

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

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

APIによるデータの設定

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

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. データモデル

8. 参考資料

WebCharts3Dには、さまざまなドキュメントが付属します。

HTMLドキュメント

WebCharts3D 5.4Jリリースノート

新機能、システム要件、既知の問題、制限事項など
<WebCharts3D_install>/readme.html

WebCharts3D 導入ガイド

WebCharts3Dの導入に関する各種情報
<WebCharts3D_install>/doc/api/index.html

WebCharts3D 開発者ガイド

WebCharts3Dを使用した開発に関する各種情報
<WebCharts3D_install>/doc/api/index.html

WebCharts3D APIリファレンス

WebCharts3D APIとして提供されるクラスやメソッドの詳細情報
<WebCharts3D_install>/doc/api/index.html

Javaヘルプ

WebCharts3Dデザイナヘルプ

デザイナの各機能の使い方、Javaアプリケーションの開発方法
デザイナ起動後、[ヘルプ]タグをクリック

WebCharts3Dマップエディタヘルプ

マップエディタの操作方法
マップエディタ起動後、[ヘルプ]タグをクリック