8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-10-24

はじめに

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

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

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

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?