はじめに
Javaの開発で1番大変なのがグラフィックス処理です。特に業務用アプリケーションなどではグラフを描画しようとすると、相当な量のコードを書かなければなりません。もっと簡単にグラフを実装できるクラスがあると、開発工数をかなり削減できます。
WebCharts3D 5.2Jは、さまざまな種類のグラフをJavaアプリケーションや、アプレットに実装できるチャートコンポーネントです。専用のグラフ作成デザイナーを持ち、さらにJavaの統合開発環境ソフトEclipseへのプラグインも提供します。
そこで、Eclipseを使ってSwingコンポーネントでグラフを表示するJavaのWindowsアプリケーション（クライアントサイド）を作ってみました。
対象読者
Java、Swingコンポーネント、Eclipseを使ってプログラムを作ったことのある人
必要な環境
JDK5.0以降、Eclipse3.0以降。なお、本プログラムは以下の環境で作成し動作確認を行っています。
- Windows Vista Service Pack1
- jdk1.6.0_05
- Eclipse 3.3.1.1
コンポーネントのインストール
はじめてWebCharts3D 5.2Jを使用する方は、プロジェクトにWebCharts3D 5.2Jをインストールする必要があります。
インストーラは、グレープシティのWebページからダウンロードできますので、ここからダウンロードしてインストールしてください。製品ページ左側の［ダウンロード］－［トライアル版］をクリックし、ダウンロード方法（［FTP］または［HTTP］）を選択すれば入手できます。なお、トライアル版のダウンロードに際しては、ユーザー登録が必要になります。
ファイルはLZH形式で圧縮されており、解凍してインストーラを起動します。有償のコンポーネントですが、プロダクトキーを入力せずにインストールすることでトライアル版として使用できます。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
Eclipseへのプラグインの追加
WebCharts3D 5.2Jをインストールしたら、以下の手順でEclipseにプラグインとして組み込みます。
- Eclipseのメニューから［ヘルプ］－［ソフトウェア更新］－［検索とインストール］を選択します。
- ［インストールする新規フィーチャーを検索］を選択し、［次へ］ボタンをクリックします。
- ［新規ローカル・サイトボタン］をクリックし、WebCharts3Dをインストールしたディレクトリにある「eclipse」フォルダを選択し［OK］ボタンをクリックします。
- 新規に追加されたサイトチェックボックスがオンになっていることを確認し、［終了］ボタンをクリックします。
- ［WebCharts 3D for Eclipse］のチェックボックスをオンにし［次へ］をクリックします。
- 使用許諾契約の［使用条件の条項に同意します］を選択し［次へ］をクリックします。
- ［終了］をクリックします。
- フィーチャーの検査画面で［インストール］をクリックします。これでプラグインがインストールされます。
- インストール処理が完了すると、Eclipse の再起動を求めるダイアログボックスが表示されるので、［はい］をクリックしEclipseを再起動します。
WebCharts3D 5.2Jについて
WebCharts3D 5.2Jは、Javaのプログラムに簡単にグラフを実装させることができるコンポーネントです。棒グラフ、折れ線グラフ、円グラフ、HiLoOpenCloseチャート、ガントチャート、ゲージ、マップなど30種類のグラフを、専用のデザイナやEclipseプラグインエディタで簡単に作成でき、作成したグラフをJSP直接出力、JSP間接出力、JSPカスタムタグ、JSF、Applet、Swing、SWTの7種類のJavaコードとして出力します。また、グラフのスタイルやモデルをXMLコードで生成することも可能です。
グラフの元となるデータは、JavaのコードでもXMLファイルでも指定可能です。
グラフのスタイルデザインは、プロパティウィンドウを使って行います。プロパティの変更がそのままグラフに反映されます。
作成したスタイルは「XMLスタイル」タブを、グラフの元データは「XMLモデル」タブに作成されます。「コードビュー」タブには、コード全文が記述されるので、これらをJavaのコードにコピー・ペーストするだけで、プログラムにグラフを実装できます。
グラフの作成 1
では、実際にグラフ作成してみましょう。グラフのソースコードは、組み込むJavaプログラムのプロジェクトに格納されるので、最初にプロジェクトを作成します。
プロジェクトの作成
プロジェクトは、通常のJavaアプリケーションを作成するプロジェクトを用意します。このとき、ライブラリーにWebCharts3D 5.2Jのjarファイルを指定しておきます。この指定を行わないと、クラスのインポートができません。
1
プロジェクト作成の2番目の画面で、「ライブラリー」タブをクリックし、「外部JARの追加」ボタンを押します。
2
WebCharts3D 5.2Jをインストールしたフォルダの中にある「lib」フォルダの「wc50.jar」ファイルを指定します。これで、WebCharts3D 5.2Jをプロジェクトで使用できるようになります。
グラフの作成
次に、グラフそのものを作成します。グラフ作成はウィザードによって行います。元データは、とりあえずデフォルトのものを使用します。
1
Eclipseのメニューから［ファイル］－［新規］－［その他］を選びます。ウィザード選択画面が表示されるので、「WebCharts3Dギャラリー」を選んで［次へ］ボタンを押します。
2
チャートギャラリーで使いたいチャートを選びます。ここでは「2D棒グラフ」の2番目を選びます。
3
ファイルのコンテナを指定します。これは、今作成したプロジェクトを指定します。［終了］ボタンを押すと、プロジェクトにチャートが組み込まれます。
4
Eclipseのメニューから［ウィンドウ］－［ビューの表示］－［その他］を選びます。［一般］をクリックして展開し、「プロパティー」を選び、プロパティーウィンドウを表示します。
このプロパティーウィンドウで、グラフのさまざまなスタイルを設定します。
グラフの作成 2
プログラムコードの作成とグラフのコード化
作成したグラフをSwingコンポーネントのJPanelコンポーネントに組み込んで、フレームで表示するようにします。
まず、WindowsアプリケーションになるようにJavaのコードを組み立てます。ここでは、JPanelクラスから派生させたサブクラス「drawpanel」を定義し、ここにグラフを表示するコードを組み込みます。
import java.awt.Container; import java.awt.GridLayout; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; public class mychart { public static void main(String[] args) { JFrame frame = new JFrame("グラフ表示"); drawpanel panel1 = new drawpanel(); Container ct = frame.getContentPane(); ct.setLayout(new GridLayout()); ct.add(panel1); frame.setBounds(300, 300, 450, 350); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); } } class drawpanel extends JPanel implements ActionListener{ private static final long serialVersionUID = 1L; JButton button1; JPanel pnl1; drawpanel(){ button1 = new JButton("閉じる"); button1.addActionListener(this); pnl1 = new JPanel(); this.add(pnl1); this.add(button1); } public void actionPerformed(ActionEvent e) { if(e.getSource()==button1){ System.exit(0); }
次に、グラフのコードを組み込みます。といっても、グラフのJavaコードは既にウィザードによって作成されているので、後はこれをコピー＆ペーストするだけです。
Eclipseのグラフファイルにある「コードビュー」タブをクリックします。そして、左下のリストから「Swing」を選ぶと、XMLで記述されているコードが、Swingコンポーネントにチャートを表示するJavaのテンプレートコードに入れ替わります。
グラフの実装
後は、それぞれのパートにこのコードをコピー＆ペーストしていきます。まず、import文すべてをコピーします。
import com.gp.api.styles.chart.MxFrameChartStyle; import com.gp.api.styles.MxStandardConstants; import com.gp.api.styles.MxElementStyle; import com.gp.api.model.MxStandardChartModel; import com.gp.api.styles.MxMorphStyle; import com.gp.api.styles.elements.MxPaletteStyle; import com.gp.api.swing.MxComponent; import com.gp.api.styles.MxWidgetStyle; import com.gp.api.styles.MxBackgroundStyle;
次に、メソッドaddChartを、サブクラス「drawpanel」の中に記述します。
チャートを表示するには、「MxComponent」クラスのインスタンスを作成し、このオブジェクトにチャートのスタイルとモデルを設定します。setStyleメソッドはチャートのスタイルを、setModelメソッドはモデル（データを含む）をそれぞれ設定します。
private void addChart(javax.swing.JPanel panel) { MxComponent chart = new MxComponent(); panel.add(chart); chart.setStyle(getWidgetStyle()); chart.setModel(getModel()); chart.setSize(400,300); }
続けて、チャートのスタイルを定義しているコード、getWidgetStyleメソッドをその下にコピーします。
private MxWidgetStyle getWidgetStyle() { MxFrameChartStyle style = new MxFrameChartStyle(); style.is3D = false; style.font = new java.awt.Font("Dialog",0,11); style.frame.xDepth = 12; style.frame.yDepth = 11; style.xAxis.titleStyle.font = new java.awt.Font("Dialog",java.awt.Font.BOLD,14); style.yAxis.scaleMin = "0"; style.yAxis.scaleMax = "450"; style.yAxis.titleStyle.font = new java.awt.Font("Dialog",java.awt.Font.BOLD,14); style.yAxis2.titleStyle.font = new java.awt.Font("Dialog",java.awt.Font.BOLD,14); style.topYAxis.titleStyle.font = new java.awt.Font("Dialog",java.awt.Font.BOLD,14); style.topYAxis2.titleStyle.font = new java.awt.Font("Dialog",java.awt.Font.BOLD,14); style.dataLabels.font = new java.awt.Font("Dialog",0,12); style.legend.allowSpan = true; style.legend.equalCols = false; style.legend.halign = MxStandardConstants.HAlignment.RIGHT; style.legend.isMultiline = true; style.legend.decoration.style = MxStandardConstants.Decoration.NONE; style.elements.place = MxElementStyle.Place.STACKED; style.elements.drawShadow = true; style.elements.morph.morph = MxMorphStyle.MorphStyle.GROW; style.title.font = new java.awt.Font("Dialog",java.awt.Font.BOLD,16); style.background.type = MxBackgroundStyle.BackgroundPaint.DIAGONALLTRBGRADIENT; style.decoration.style = MxStandardConstants.Decoration.ROUNDSHADOW; style.paint.palette = MxPaletteStyle.PASTEL; style.paint.isVertical = true; style.paint.min = 47; style.paint.max = 83; style.insets.right = 5; return style; }
また、チャートの元データとチャートの数などを定義するメソッド、getModelをその下にコピーします。
private MxStandardChartModel getModel() { MxStandardChartModel model = new MxStandardChartModel(); model.insertCol("2000",null,-1); model.insertCol("2001",null,-1); model.insertCol("2002",null,-1); model.insertCol("2003",null,-1); model.insertCol("2004",null,-1); model.insertRow("春", new double [] { 100.0, 200.0, 100.0, 180.0, 200.0 } ,-1); model.insertRow("夏", new double [] { 150.0, 300.0, 250.0, 230.0, 250.0 } ,-1); model.insertRow("秋", new double [] { 200.0, 400.0, 400.0, 280.0, 300.0 } ,-1); model.insertRow("冬", new double [] { 250.0, 500.0, 550.0, 330.0, 350.0 } ,-1); return model; }
最後に、クラス「drawpanel」のコンストラクタで、addChartメソッドを呼び出します。引数は、チャートを表示するコンテナコンポーネントです。ここでは、もう1つJPanelを実装しここにチャートを表示するようにしています。
class drawpanel extends JPanel implements ActionListener{ ... ... drawpanel(){ ... ... addChart(pnl1); this.add(pnl1); this.add(button1); }
これでできあがりです。今回は、ウィザードによってグラフを作成し、背景をグラデーションで塗りつぶすようにしてからコードをペーストしましたが、コードをペーストしてからグラフのスタイルを変更した場合は、再度修正後のコードをペーストし直さないと、修正が反映されませんので注意してください。
まとめ
昨今のGUIアプリケーションは、たとえグラフといえども魅力的な表現が求められる傾向にありますが、WebCharts3D 5.2Jは、驚くほど簡単にとても綺麗で表現力豊かなグラフをJavaアプリケーションに実装できます。
何よりも、面倒なJavaコードを自動生成してくれるのはとてもありがたい機能であり、開発ソリューションにとっては、開発工数・工期を削減してくれる大きな効果を生み出してくれることでしょう。
次回は、さらにコードからグラフを操作する機能を組み込んでみたいと思います。
