[Android Tips] HoloGraphLibrary で Holo テーマ風なグラフを作成する

Holo テーマによく合うグラフライブラリ

今回は HoloGraphLibrary という、Holo テーマ風なグラフを作成できるライブラリをご紹介したいと思います。 3種類のグラフ (折れ線グラフ、棒グラフ、円グラフ) を簡単に作成することができます。見た目がクールなので、それだけで使いたくなっちゃいますね。ちなみに Android 2.2 (APIレベル8) から使用できます。

HoloGraphLibrary をインポートする

HoloGraphLibrary は BitBucket で公開されているのでこのリポジトリをクローンしましょう。

git clone git@bitbucket.org:danielnadeau/holographlibrary.git

あとは Eclipse か Android Studio で HoloGraphLibrary プロジェクトを自分のアプリプロジェクトにインポートして終わりです。ちなみにサンプルソースである HoloGraphLibrarySample プロジェクトを実行したい場合は ActionBarSherlock も必要なのでインポートしておくようにしましょう。

HoloGraphLibrary でグラフを作成する

では早速グラフを作ってみましょう。

折れ線グラフを作成する (LineGraph)

折れ線グラフを作る場合は LineGraph クラスを使います。

<com.echo.holographlibrary.LineGraph
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:id="@+id/graph"/>

グラフにセットするデータは Line クラスを使い Line.addPoint() で Point を追加していきます。Line.setColor() で線の色を自由に設定することが可能です。データができたら LineGraph.addLine() でセットして終わりです。また LineGraph.setRangeY() で表示するデータの最小値・最大値を設定することができます。

Line l = new Line();
LinePoint p = new LinePoint();
p.setX(0);
p.setY(2);
l.addPoint(p);
p = new LinePoint();
p.setX(8);
p.setY(8);
l.addPoint(p);
p = new LinePoint();
p.setX(10);
p.setY(4);
l.addPoint(p);
l.setColor(Color.parseColor("#9acd32"));

LineGraph graph = (LineGraph) findViewById(R.id.graph);
graph.addLine(l);
graph.setRangeY(0, 10);
graph.setLineToFill(0);

このソースを実行するとこんな感じです。

ちなみに LineGraph.addLine() でデータを追加し、複数の折れ線を表示することもできます。また、タップしたときのイベントは setOnPointClickedListener() にリスナをセットすることで取得できます。

棒グラフを作成する (BarGraph)

棒グラフを作成するには BarGraph クラスを使います。

<com.echo.holographlibrary.BarGraph
   android:layout_width="match_parent"
   android:layout_height="300dp"
   android:id="@+id/graph"/>

グラフにセットするデータは Bar クラスで作成し、 ArrayList にして BarGraph.setBars() でセットします。Bar.setColor() で棒の色を、Bar.setValue() で値をセットします。また Bar.setName() で名前をセットすると棒の下に名前を表示することができます。

ArrayList<Bar> points = new ArrayList<Bar>();
Bar d = new Bar();
d.setColor(Color.parseColor("#ff69b4"));
d.setName("Test1");
d.setValue(10);
Bar d2 = new Bar();
d2.setColor(Color.parseColor("#ffa500"));
d2.setName("Test2");
d2.setValue(20);
Bar d3 = new Bar();
d3.setColor(Color.parseColor("#9370db"));
d3.setName("Test3");
d3.setValue(15);
points.add(d);
points.add(d2);
points.add(d3);

BarGraph graph = (BarGraph) findViewById(R.id.graph);
graph.setBars(points);

実行すると下図のようになります。

グラフをタップしたときのイベントは setOnBarClickedListener() にリスナをセットすることで取得できます。

円グラフを作成する (PieGraph)

円グラフを作成するには PieGraph クラスを使います。

<com.echo.holographlibrary.PieGraph
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:id="@+id/graph"/>

グラフにセットするデータは PieSlice クラスで作成します。PieSlice.setColor() で塗りの色、PieSlice.setValue() で値をセットします。最後に PieGraph.addSlice() でデータを追加します。追加されたすべての PieSlice の合計値との割合で各アイテムの大きさが自動で決められます。

PieGraph graph = (PieGraph) findViewById(R.id.graph);
PieSlice slice = new PieSlice();
slice.setColor(Color.parseColor("#99CC00"));
slice.setValue(2);
graph.addSlice(slice);
slice = new PieSlice();
slice.setColor(Color.parseColor("#FFBB33"));
slice.setValue(3);
graph.addSlice(slice);
slice = new PieSlice();
slice.setColor(Color.parseColor("#AA66CC"));
slice.setValue(8);
graph.addSlice(slice);

実行すると下図のようになります。

こちらも setOnSliceClickedListener() にリスナをセットすることで、アイテムをタップしたときのイベントを取得することができます。

まとめ

グラフ系のライブラリはいくつかありますが、ここまでオシャレなのはなかったように思います。実装も簡単なので手軽に導入できますね！