はじめに
Wicketで作っているWebアプリケーションでグラフを表示させたかった。
どうやらWickedChartというライブラリを使えば簡単にできるみたい。
WickedChart
github//wicked-charts/Readmeより抜粋
Wicked Charts is a Java wrapper of the Highcharts javascript library. Highcharts provides eye-pleasing charts using HTML5 SVG technology (see http://www.highcharts.com/demo). With Wicked Charts, you can configure a chart in Java and display it in any web application based on Apache Wicket or JSF. Or you can use the Highcharts Java wrapper to integrate it in web applications built with other java web frameworks.
HighchartsっていうJavascriptライブラリ用のラッパークラスで、
WicketやJSFで使えるし、他のJava Web フレームワークでも使える。
ライセンス
github//wicked-charts/Readmeより抜粋
Please note that while Wicked Charts is licensed under Apache 2.0 License, Highcharts itself is only free for non-commercial use. See here: [http://shop.highsoft.com/highcharts.html]
Wicked Charts自身はApache2.0ライセンスで使用可能だけど、
実際にグラフを描画するライブラリ部分(HighCharts)は商用目的では使えないみたい。
商用目的で使う場合の料金一覧
ライセンスひとつ分が US$590.00(2014/10/23時点)
使い方
必要なライブラリ
Mavenの設定ファイル pom.xmlにdependencyを追加。使用するWicketのバージョンに注意する。
Wicket 6.x
<dependency>
<groupId>com.googlecode.wicked-charts</groupId>
<artifactId>wicked-charts-wicket6</artifactId>
<version>1.5.0</version>
</dependency>
Wicket 1.5.x
<dependency>
<groupId>com.googlecode.wicked-charts</groupId>
<artifactId>wicked-charts-wicket15</artifactId>
<version>1.5.0</version>
</dependency>
Javaクラスですること
2ステップ
1.描画したいグラフのタイプや、数値、ラベルなどのオプション設定
2.設定したグラフをページにAddする
HTMLですること
好きなところに下のタグを追加する
<div wicket:id="chart"/>
サンプルコード
//一部抜粋
Options options = new Options();
options
.setChartOptions(new ChartOptions()
.setType(SeriesType.LINE));
options
.setTitle(new Title("My very own chart."));
options
.setxAxis(new Axis()
.setCategories(Arrays
.asList(new String[] { "Jan", "Feb", "Mar", "Apr", "May",
"Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" })));
options
.setyAxis(new Axis()
.setTitle(new Title("Temperature (C)")));
options
.setLegend(new Legend()
.setLayout(LegendLayout.VERTICAL)
.setAlign(HorizontalAlignment.RIGHT)
.setVerticalAlign(VerticalAlignment.TOP)
.setX(-10)
.setY(100)
.setBorderWidth(0));
options
.addSeries(new SimpleSeries()
.setName("Tokyo")
.setData(
Arrays
.asList(new Number[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5,
25.2, 26.5, 23.3, 18.3, 13.9, 9.6 })));
options
.addSeries(new SimpleSeries()
.setName("New York")
.setData(
Arrays
.asList(new Number[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0,
24.8, 24.1, 20.1, 14.1, 8.6, 2.5 })));
//上記の設定をもとにグラフをページにAddする
add(new Chart("chart", options));
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div wicket:id="chart" style="height:500px; width:800px" />
</body>
</html>
結果
他にもいろいろなグラフを作成できる。
作成可能なグラフ一覧
設定可能な値
情報元
Wicked Chart: Githubリポジトリ
Wicked Chart: Getting Started
Wicked Chart: リファレンス
HighchartsAPI:リファレンス