新人研修の記録5

こんにちは、Tamamoです。

SQLから取得したデータをグラフ表示させることになりました。
さて、どうしたものか・・・。

よし!AndroidのAPIにそのような機能があるのか探してみよう!
ということで調査したところそんな都合の良いものはなありませんでした。。

そのため、グラフ表示させることのできるライブラリがないかネットで探したところ
「MPAndroidChart」という、PhilJay氏が開発したチャート表示ライブラリがありました!

「折れ線グラフ」「棒グラフ」「円グラフ」「レーダーチャート」「ローソク足チャート」
が表示でき、また、ネット上にHow toが沢山あったのと、
バージョンの更新もされていたのでこれを使ってグラフを表示させてみることにしました。

例として棒グラフを表示させてみます。

導入の仕方は簡単で、Gradleに記述すれば導入できます。
※現時点での最新版はv3.0.3です。
 MPAndroidChartはApache License, Version 2.0 で公開されています。

allprojects {
    repositories {
        maven { url “https://jitpack.io” }
    }
}

dependencies {
    compile ‘com.github.PhilJay:MPAndroidChart:v3.0.3’
}

BarChartを画面に配置するには、レイアウトXMLにBarChartを配置します。

<com.github.mikephil.charting.charts.BarChart
    android:id=”@+id/bar_chart”
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    android:layout_margin=”16dp” />

導入は以上です。えっこれだけ!?と思われるかもしれませんが、
これだけです。

あとは、以下のコードを入力します。
少々難しく見えますが、各パラメータを「true」か「false」で設定しているだけなので
パラメータの意味を理解すればあまり難しくありません。
重要な項目はコメントで書いた<<重要:>>というところだけです。

private void setupBarChartView() {
    chart = findViewById(R.id.bar_chart);

    //データをセットする
    ArrayList<BarEntry> entries = new ArrayList<>();
    entries.add(new BarEntry(1, 60)); //<<重要:各グラフのデータ>>
    entries.add(new BarEntry(2, 30));
    entries.add(new BarEntry(3, 10));
    List<IBarDataSet> bars = new ArrayList<>();
    BarDataSet dataSet = new BarDataSet(entries, “Bar”);

    //棒グラフの色をセット
    dataSet.setColors(ColorTemplate.COLORFUL_COLORS);
    bars.add(dataSet);

    //表示データセット
    BarData data = new BarData(bars);
    chart.setData(data);

    //YAxis(Left)
    YAxis left = chart.getAxisLeft();
    left.setAxisMinimum(0);
    left.setAxisMaximum(100);
    left.setLabelCount(5);
    left.setDrawTopYLabelEntry(true);

    //YAxis(Right)
    YAxis right = chart.getAxisRight();
    right.setDrawLabels(false);
    right.setDrawGridLines(false);
    right.setDrawZeroLine(true);
    right.setDrawTopYLabelEntry(true);

    //XAxis
    XAxis xAxis = chart.getXAxis();
    final String[] labels = {“”,”A”, “B”, “C”}; //<<重要:X軸のラベル>>
    xAxis.setValueFormatter(new IndexAxisValueFormatter(labels));
    XAxis bottomAxis = chart.getXAxis();
    xAxis.setGranularity(1f);
    xAxis.setGranularityEnabled(true);
    bottomAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    bottomAxis.setDrawLabels(true);
    bottomAxis.setDrawGridLines(false);
    bottomAxis.setDrawAxisLine(true);

    //グラフの設定
    chart.setDrawValueAboveBar(true);
    chart.getDescription().setEnabled(false);
    chart.setClickable(false);
    chart.getLegend().setEnabled(false);
    chart.setScaleEnabled(false);
    chart.animateY(1200, Easing.EasingOption.Linear);
}

こんな感じでグラフが表示されます。

         

ビジュアル的に満点なので、とてもやる気が出てきますね!
また、様々なメソッドが用意されているので、複雑なグラフも自由自在です。
例えばグラフを左右にスクロールさせたりすることも可能です。
非常に面白いライブラリなので使いこなせるように、色々いじってみようと思います。

火曜日担当:Tamamo




アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム