グラフの作成 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コードを自動生成してくれるのはとてもありがたい機能であり、開発ソリューションにとっては、開発工数・工期を削減してくれる大きな効果を生み出してくれることでしょう。
次回は、さらにコードからグラフを操作する機能を組み込んでみたいと思います。
