MPAndroidChartで統計グラフ

3 min read読了の目安(約2900字

統計グラフ欲しいなと思った

グラフのあるアプリって、ぱっと見で資産の推移とか純利益が見れたりしていいなっておもった

特に、某MoneyTreeとかをみて、、、笑

なので、googleってみたら、MPAndroidChartなるものが、いいよって記事がいっぱいあったので、使ってみることにした

https://github.com/PhilJay/MPAndroidChart

目標

資産の推移グラフと純利益が分かるグラフ(某MoneyTreeぽいの)を作成する!!

導入

android studioを開いて、

build.gradle(:${projectName}) ->

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

build.gradle(:app) ->

dependencies {
	implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

で、syncして導入完了

使い方

この記事見ました

https://qiita.com/c60evaporator/items/14e63d22d860b73e6f22

私があーやこーやいうよりとっても分かりやすい 笑

一応、復習もかねて、ざっと言うと

  1. Entry
    イメージは、実験したときの記録の一つ
    Entry 1つ に、(x,y or y[])を代入する
new BarEntry(x, y or y[]);
  1. DataSet
    Entryの集合体
    Entryを、DataSetに集める
List<Entry> entryList = new ArrayList<>();

for (int i=0; i< size; i++) {

    //x,yを取得
    float x = getX(i);
    float y = getY(i);

    //entryListに格納
    entryList.add(new Entry(x, y));

}

//labelは、凡例に表示される名前
DataSet DataSet = new DataSet(entryList, label);

//<DataSetのフォーマット指定>
~~~

他にも集めたいデータがあれば、繰り返す(例えば、折れ線グラフの2本目の線)

  1. Data
    DataSetの集合体
    DataSetを、Dataに集める

Data Data = new Data(DataSet);

//<Dataのフォーマット指定>

  1. (CombinedDataのとき)
    違う種類のchartを合わせるときにつかうやーつ
    さっき作ったDataを代入する
CombinedData data = new CombinedData();

//Data設定
data.setData(lineData);
data.setData(barData);
data.setData(scatterData);
data.setData(candleData);
data.setData(bubbleData);

//<Dataのフォーマット指定>

LineData,BarData,ScatterData,CandleData,BubbleDataは、各種1点までの制限

  1. Chart
    実際に画面に描いてくれるやつ
    Chartにセットして完了
Chart chart = view.findViewById(R.id.chart);

//Dataを設定
Chart.setData(data);

//<Chartの各種設定>

てやると、なんとグラフを表示してくれます。

とても便利だ!

ハマったとこ

onClick()が見つからない

onClickがあると思い込んでて、探したらなくて焦った
正解は、OnChartValueSelectedListenerでした

グラフをタップすると、強調される、そんときのcallbackを受け取ることで、求めていたonClick的な役割を作成できた

callback

chart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
    @Override
    public void onValueSelected(Entry e, Highlight h) {
	 //highlightが点いた
    }

    @Override
    public void onNothingSelected() {
	//どこもhighlightが消えた
    }
});

プログラムから、変更

chart.highlightValue(hightlight, callListener);
//Hightlight hightlight 点けるHightlight,消すときは、null
//boolean callListener そのとき、callback呼び出すか

labelの表示がわからん

1月、2月、3月、、、に対応したグラフを表示したいと思ったとき

//ラベル
List<String> labels = Arrays.asList("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");

//x軸の取得、y軸のときも同じ
XAxis xAxis = chart.getXAxis();

//xの値に対して、どんな数値を返すか
xAxis.setValueFormatter(new ValueFormatter() {
    @Override
    public String getFormattedValue(float value) {
	return labels.get((int)value%labels.size());
    }
});

色々できて楽しいが、その分考えすぎて、よく寝た 笑

作ったグラフは、アプリ内にあります

ぜひ、応援のダウンロードよろしくおねがいします。

https://play.google.com/store/apps/details?id=io.github.povec