More than 5 years have passed since last update.

Wicketで使えるグラフ表示ライブラリ WickedChart

Last updated at 2014-10-24Posted at 2014-10-24

はじめに

Wicketで作っているWebアプリケーションでグラフを表示させたかった。
どうやらWickedChartというライブラリを使えば簡単にできるみたい。

WickedChart

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ですること

好きなところに下のタグを追加する

Test.html

<div wicket:id="chart"/>

サンプルコード

Test.java

//一部抜粋

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));

Test.html

<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：リファレンス

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up