機能概要
入力データをもとに画像ファイルを作成して、ブラウザ画面上にグラフ画面を表示します。
以下の5種類のグラフがサンプルとして用意されています。
- 折れ線グラフ
- 棒グラフ
- 円グラフ
- レーダーチャート
- ポートフォリオ
グラフ描画モジュールを利用する場合、Java Image Management Interface(JIMI)を別途インストールする必要があります。以下にその方法を示します。
(Java Image Management Interface(JIMI)は米国サンマイクロシステムズが開発したものです。)
- JIMIを以下のサイトからダウンロードする。
http://java.sun.com/products/jimi/
- ダウンロードしたJIMIのアーカイブを解凍する。
- 解凍先のディレクトリに含まれるJimiProClasses.jar(またはzip)を以下のディレクトリにコピーする。
<Application Runtimeのインストールパス>/doc/imart/WEB-INF/lib
または、ウェブアプリケーションサーバ起動時のクラスパスに追加する。
|
プレゼンテーション・ページAPI
<IMART> タグを利用します。
<IMART> タグの type 属性に指定する値によって、異なるグラフを描画することができます。
type属性値
| グラフの種類 |
line_graph |
折れ線グラフ |
bar_graph |
棒グラフ |
circle_graph |
円グラフ |
radar_chart |
レーダーチャート |
port_folio |
ポートフォリオ |
(例) <IMART type="line_graph">
詳細なプログラム・インターフェースに関しては、画面共通モジュール を参照下さい。
ファンクション・コンテナAPI
Drawer.* を利用します。
詳細なプログラム・インターフェースに関しては、アプリケーション共通モジュール を参照下さい。
例: [折れ線グラフ]
プレゼンテーション・ページ
<HTML>
<HEAD>
<TITLE>Line_Graph Sample</TITLE>
</HEAD>
<BODY>
<IMART type="line_graph"
data=oData
image_width="300"
image_height="300"
data_min="-30"
data_max="60"
scale_count="20"
alt="IM_LineGraph">
</IMART>
</BODY>
</HTML>
<!-- End of File -->
|
<IMART type="line_graph"> の data 属性 に対するバインド変数 oData は、ファンクション・コンテナで生成した描画データオブジェクトの格納されている変数名。
ファンクション・コンテナ
// バインド変数宣言
var oData; // 折れ線グラフ描画データ
// ページの初期化関数
function init() {
// 折れ線グラフ描画データオブジェクトの作成
oData.aCaption = new Array("1月", "2月", "3月", "4月", "5月", "6月");
oData.aData = new Array();
oData.aData[0] = new Object();
oData.aData[0].aData = new Array(50, 10, 30, 5, 30, 20);
oData.aData[0].sColor = "red";
oData.aData[0].nWidth = 5;
oData.aData[1] = new Object();
oData.aData[1].aData = new Array(10, 40, -20, 30, -10, 45);
oData.aData[1].sColor = "yellow";
oData.aData[2] = new Object();
oData.aData[2].aData = new Array(20, 30, 50, 25, 45, 55);
oData.aData[2].sColor = "green";
oData.aData[2].nStyle = new Array(10,10);
}
/* End of File */
|
描画された折れ線グラフ(例)
|