前回はiOSアプリでシンプルなGraphを描画できるライブラリを紹介しました。

今回はAndroidGraphを描画するライブラリを紹介します。

これもとっても簡単に導入できました。

描画するまでにちょっと手こずりましたがそれも含めて紹介したいと思います。

Android GraphView

ScreenShot74

このライブラリを使っていきます。

ちなみにこんな感じに出来ます。(あまりアレンジしてません)

ScreenShot75

このライブラリでカスタマイズできる所

箇条書きで上げていきます。

  • グラフの線の太さ、色
  • 縦軸、横軸の文字の色
  • 縦軸、縦軸、タイトルの文字の大きさ
  • 縦軸の文字の幅
  • 拡大
  • 拡大したときのスクロール
  • 複数のグラフの表示
  • 更新

という感じでほとんどのことが出来ます。

複数のグラフを描画するとこのような形になります。

ScreenShot76

拡大するとこのようになります。

ScreenShot77

ちなみにライセンスはGNUと書かれていました。

では簡単な使い方を紹介していきます。

導入方法

AndroidStudioを使っている方は以下のソースをbuild.gradleに追加してください。

build.gradle
1
2
3
dependencies {
compile 'com.jjoe64:graphview:3.1.3'
}

他にもjarファイルを配布しているので、そちらをlibsに追加するなりしてください。

簡単な使い方

まずはレイアウトファイルです。

res/layout/activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/graphLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
/>
</RelativeLayout>

ここで一つ注意が必要なのが、layoutファイルでGraphViewを生成できないということです。

色々試してみましたがActivity#findViewById(int id)で取得しようとするとnullが返ってきてなにも出来ませんでした。

なのでLinearLayout(id:graphLayout)を取得してaddViewをする形で対応しました。

では簡単な描画方法を紹介します。

MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
LineGraphView graphView = new LineGraphView(this, "SampleGraphView");
// 適当にデータを作成
int num = 10;
GraphView.GraphViewData[] data = new GraphView.GraphViewData[num];
double v = 0.0d;
for (int i = 0; i < num; i++) {
v += 0.5d;
data[i] = new GraphView.GraphViewData(i, Math.sin(v));
}
// 線の太さ
int thickness = 5;
GraphViewSeries.GraphViewSeriesStyle graphViewSeriesStyle = new GraphViewSeries.GraphViewSeriesStyle(Color.BLUE, thickness);
GraphViewSeries graphViewSeries = new GraphViewSeries("Sample", graphViewSeriesStyle, data);
graphView.addSeries(graphViewSeries);
LinearLayout graphLayout = (LinearLayout)findViewById(R.id.graphLayout);
graphLayout.addSubView(graphView);

こうすると波線のグラフが描けます。

GraphViewSeries.GraphViewSeriesStyleの第1引数が線の色で、第2引数が線の太さとなります。

GraphView.GraphViewData

こんなクラスです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* one data set for a graph series
*/
static public class GraphViewData implements GraphViewDataInterface {
public final double valueX;
public final double valueY;
public GraphViewData(double valueX, double valueY) {
super();
this.valueX = valueX;
this.valueY = valueY;
}
@Override
public double getX() {
return valueX;
}
@Override
public double getY() {
return valueY;
}
}

第1引数がx軸で第2引数がy軸となります。

描画したい値を定めて、GraphViewDataを生成する形となります。

描画のスタイルのカスタマイズ

色々カスタマイズが出来るので簡単なメソッドの紹介です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
LineGraphView graphView = new LineGraphView(this, "SampleGraphView");
// GraphViewStyleの取得
GraphViewStyle graphViewStyle = graphView.getGraphViewStyle();
// 背景の線の色(格子になっているやつ)
graphViewStyle.setGridColor(Color.DKGRAY);
// 横軸(X軸)のラベルの色
graphViewStyle.setHorizontalLabelsColor(Color.DKGRAY);
// 縦軸(Y軸)のラベルの色
graphViewStyle.setVerticalLabelsColor(Color.DKGRAY);
// 縦軸(Y軸)のラベルのAlign
graphViewStyle.setVerticalLabelsAlign(Paint.Align.CENTER);
// 横軸のラベルの数(0 = auto)
graphViewStyle.setNumHorizontalLabels(5);
// 縦軸のラベルの数(0 = auto)
graphViewStyle.setNumVerticalLabels(5);
// 各ラベルのテキストサイズ
graphViewStyle.setTextSize(40.0f);
// 縦軸のラベルの幅(0 = auto)
graphViewStyle.setVerticalLabelsWidth(0);
// 背景
graphView.setBackgroundColor(Color.DKGRAY);
// グラフを拡大出来るようにするか
graphView.setScalable(true);
// グラフを拡大したときにスクロールできるようにするか
graphView.setScrollable(true);

という感じです。

ある程度は自由にカスタマイズできます。

Legend

複数グラフを表示した時にどの色のグラフが何を指しているのかを伝えるものです。

一般的には右下に色と名前があって、「この色はこれを指してます。」みたいに表示されているものです。

これのスタイルも設定できます。

1
2
3
4
5
6
7
8
9
10
// Legendを表示するかどうか
graphView.setShowLegend(true);
// Legendを表示する幅
graphViewStyle.setLegendWidth(200);
// 各項目のスペース
graphViewStyle.setLegendSpacing(100);
// ボーダーの幅
graphViewStyle.setLegendBorder(10);
// MarginBottom
graphViewStyle.setLegendMarginBottom(100);

という形で設定できます。

さらにLegendの表示位置は

1
2
3
4
5
6
graphView.setLegendAlign(GraphView.LegendAlign.BOTTOM);
/*
public enum LegendAlign {
TOP, MIDDLE, BOTTOM
}
*/

で設定することが出来ます。

再描画する

これも簡単にできます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
int num = 10;
GraphView.GraphViewData[] data = new GraphView.GraphViewData[num];
double v = 0.0d;
for (int i = 0; i < num; i++) {
v += 0.5d;
data[i] = new GraphView.GraphViewData(i, Math.sin(v));
}
int thickness = 5;
GraphViewSeries.GraphViewSeriesStyle graphViewSeriesStyle = new GraphViewSeries.GraphViewSeriesStyle(Color.BLUE, thickness);
mGraphViewSeries = new GraphViewSeries("Sample", graphViewSeriesStyle, data);
graphView.addSeries(data);
LinearLayout graphLayout = (LinearLayout)findViewById(R.id.graphLayout);
graphLayout.addSubView(graphView);
private void refresh() {
int num = 10;
GraphView.GraphViewData[] data = new GraphView.GraphViewData[num];
double v = 0.0d;
for (int i = 0; i < num; i++) {
v += 0.5d;
data[i] = new GraphView.GraphViewData(i, Math.sin(v));
}
mGraphViewSeries.resetData(data);
}

一度生成したGraphViewSeriesを保持しておき、更新なり再描画のタイミングでresetData(GraphView.GraphViewData[])を呼び出して新しいデータを渡しています。

これだけで再描画されます。

使ってみた感想

一般的なグラフを表示するには最適なライブラリだと思いました。

かなり説明べたでしたが、色々試したサンプルをGitHubに上げたので、よかったら確認してみてください。

NinjaAdMax

終わりに

iOSで良いやつがあったので、Androidでも探してみました。

かなり使えると思ったので、なにか機会があったら使ってみたいです。

以上になります。