efw Chart コンポーネントサンプル

概要

efwフレームワークは強力なグラフ機能を提供し、シンプルなJSPタグで多種多様なグラフ表示を実現します。このコンポーネントはGoogle ChartsとChart.jsの2つのレンダリングエンジンをサポートし、オンラインとオフライン環境の両方でのグラフ要件に対応できます。

コアファイル

helloChart.jsp

機能特性

1. データテーブル設定

グラフデータはHTMLテーブルで定義され、豊富な設定オプションをサポート：

<table id="chart1_data" 
       data-format="$#,##0" 
       data-legend="bottom" 
       data-ticks="0,200,400,600,800,1000">
    <!-- テーブル内容 -->
</table>

data-format: データフォーマット設定（通貨フォーマット等）
data-legend: 凡例位置設定
data-ticks: 軸目盛り設定
data-color: 行と列の色設定

2. グラフレンダリングエンジン

2つのレンダリングモードをサポート：

<!-- Google Charts モード (ネットワーク接続が必要) -->
<efw:Chart mode="googlechart" />

<!-- Chart.js モード (オフライン使用可能) -->
<efw:Chart mode="chartjs" />

3. サポートされるグラフタイプ

JavaScript APIで多種多様なグラフタイプを動的に切り替え：

グラフタイプ	説明	サポートエンジン
area	エリアチャート	両方
bar	バーチャート	両方
column	カラムチャート	両方
donut	ドーナツチャート	両方
line	折れ線グラフ	両方
pie	円グラフ	両方
scatter	散布図	両方
stackedarea	積み上げエリアチャート	両方
stackedbar	積み上げバーチャート	両方
stackedcolumn	積み上げカラムチャート	両方
radar	レーダーチャート	Chart.js

4. 設定オプションコールバック

setoptions属性でグラフ設定情報の取得や設定：

function setChar1Options(options) {
    $("#char1Options").html(JSON.stringify(options));
}

使用説明

1. 基本設定

<efw:Chart 
    id="chart1"                <!-- グラフID -->
    data="chart1_data"         <!-- データテーブルID -->
    type="column"              <!-- 初期グラフタイプ -->
    mode="googlechart"         <!-- レンダリングエンジン -->
    width="400px"             <!-- グラフ幅 -->
    height="300px"            <!-- グラフ高 -->
    setoptions="callbackFunc" <!-- 設定コールバック関数 -->
/>

2. データテーブル仕様

データテーブルは特定の構造に従う必要があります：

最初の行はヘッダーで、データ系列名を定義
最初の列は行ラベル
data-color属性による色設定をサポート
数値フォーマットをサポート

3. 動的操作

JavaScript APIでグラフを動的に操作：

// グラフタイプ変更
chart1.setType('pie');

// グラフデータ更新
chart1.draw();

技術的優位性

1. 開発の簡素化

複雑なJavaScriptコードの記述が不要
HTMLテーブルで直接グラフデータを定義
Excelのような設定方式で学習コストを低減

2. デュアルエンジンサポート

Google Charts: 機能豊富で美しいグラフ
Chart.js: オフライン使用をサポート、軽量

3. テーマカスタマイズ

カスタムカラースキームのサポート
拡張可能なスタイル設定

注意事項

ネットワーク依存: Google ChartsモードはGoogleサーバーへのネットワーク接続が必要
ブラウザ互換性: 最適な体験のために現代的なブラウザの使用を推奨
データ量制限: 超大規模データ時はサーバーサイドページネーションの使用を推奨

まとめ

efwグラフコンポーネントは、シンプルで使いやすいグラフソリューションを提供し、宣言的な設定方式でグラフ開発の複雑さを大幅に低減します。単純なデータ可視化でも複雑な業務レポートでも、シンプルなタグ設定で迅速に実現できます。

デュアルエンジンアーキテクチャは機能の豊富さを保証するとともに、オフライン使用の柔軟性を提供し、様々なアプリケーションシナリオの要件に適しています。