第３回 androidアプリにafreechartでグラフを表示させる！

みなさん、こんにちは、たむらです。

最近、もうすぐで１歳になる娘が黄色のケースに夢中になっています。
ちゃんとしたおもちゃにはそこまで夢中にならずにこういったものにやたらと夢中になる、不思議なもんですねー。
好奇心が半端なくあるんでしょうね。

最初に・・・

さてさて、第３回目はとりあえず雰囲気を掴むためにもまずはグラフ（折れ線グラフ）を表示させてみようと思います！
なお、解説にあたって、あくまでも僕が「試験タイマー」でやったことをベースにしています。
そんなわけで最初らへんはグラフの種類を折れ線グラフで解説していきます。後々、円グラフや棒グラフにも手を伸ばしていきたいと思っています。
また僕自身がafreechart自体そこまで把握しているわけではないので、結構、このブログは自分の勉強のためにもなっています。
解説している内容がおかしかったり、わかりにくかったりするかもしれません、その時はドシドシとご指摘をしていただけると幸いです！

まずはベースとなるソースをコピペ

２回目でいいましたが、まずはafreechartのダウンロードページからソースが格納されているzipファイル（執筆時はafreechart-0.0.4.zip）をダウンロードしてください。

ダウンロードしたzipファイルを解凍してください。

「afreechart-0.0.4\afreechart_sample\src\org\afree\chart\demo\DemoView.java」をコピペしましょう。

※このDemoView.javaがグラフを表示する上でコアとなるクラスになります。
※クラス名は適宜、変更してね（僕はChartView.javaにしました）。

DemoView.javaを修正

コピペしたDemoView.javaにエラーが出ています。

エラー箇所は以下のメソッドです。

getScaleX()
getScaleY()

これらのメソッドは、android.view.View.getScaleXとgetScaleYをオーバーライドしているのですが、もとの戻り値がfloat型なのにdoubleになっているのが原因のようです。
ですから、ここではこれらのメソッドの戻り値をdoubleからfloatに変更してあげましょう。

とりあえず

とりあえず必要最低限のクラスやらレイアウトファイルを作成します。
以下のソースをもとに作ってみてください！
それでとりあえずはグラフが表示されるはずです！？

DemoViewクラスを継承したクラスを作成

package com.create.aozora.sample_afreechart.view;

// importのところは割愛しまーす！

/**
 * ここで実際のグラフを生成していきます。
 */
public class SampleChartView extends ChartView {

    /**
     * コンストラクタ
     */
    public SampleChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * グラフ生成
     */
    public void createChart(int[] dataList) {

        // X軸の定義
        NumberAxis domainAxis = new NumberAxis("X軸");

        // Y軸の定義
        NumberAxis rangeAxis = new NumberAxis("Y軸");

        // 折れ線の定義
        XYLineAndShapeRenderer renderer = new XYLineAndShapeRenderer();

        // データのセット
        XYSeries xy = new XYSeries("データ");
        int i = 0;
        for (int value : dataList) {
            xy.add(i + 1, value);
            i++;
        }
        XYSeriesCollection dataset = new XYSeriesCollection(xy);

        XYPlot plot = new XYPlot(dataset, domainAxis, rangeAxis, renderer);

        AFreeChart aFreeChart = new AFreeChart(plot);

        setChart(aFreeChart);
    }
}

Activityクラスを作成

package com.create.aozora.sample_afreechart.activity;

// importのところは割愛しまーす！

public class MainActivity extends Activity {

    SampleChartView sampleChartView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // 初期化
        sampleChartView = (SampleChartView)findViewById(R.id.sample_chart);

        // グラフに表示するデータを生成
        int[] dataList = {10, 5, 20, 8};

        // グラフを生成
        sampleChartView.createChart(dataList);
    }

}

layoutファイルを作成

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.create.aozora.sample_afreechart.view.SampleChartView
        android:id="@+id/sample_chart"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

</LinearLayout>

さぁ、実行しよう

これでグラフを表示する準備が整いました！
それでは実際にアプリを端末で動かしてみましょう！
ドキドキしますねぇー。

以下のように表示されました。

おわりに

今回はとりあえず表示させただけなので、まったくもって味気ないグラフが表示されました。
次回以降はもっとまともなグラフを表示させるために段階的にいろいろいじくっていこうと思います。
またプロパティやクラスがどういう役割なのかを解説していけたらなと思います。

それではまた来週！

Aozora, LLC