[안드로이드]그래프 만들기(MPAndroidChart)

오늘은 안드로이드에 그래프를 그려보겠습니다.

그래프를 만드는데는 다양한 방법이있습니다. 이번에 만들 그래프 라이브러리는 MPAndroidChart 입니다.

깃허브 : https://github.com/PhilJay/MPAndroidChart

MPAndroidChart 외에도 AChartEngine 등이 있지만 AChartEngine 보다 MPAndroidChart 가 약간 무겁지만 여러가지 애니매이션효과, 기능들이 있어 훨씬 보기에 좋습니다. 안드로이드 개발은 기능도기능이지만 보여지는 뷰가 좋아야 한다고 생각하기 때문에 MPAndroidChart 를 사용하는것이 좋아보입니다.

그럼 MPAndroidChart 사용법에 대해 간단히 알아보겠습니다. 해당 깃허브를 가면 모든것을 알 수 있지만 여기서 간단히 꺾은선 그래프를 만들어 보겠습니다. (깃허브에는 꺾은선그래프 외에도 원형, 막대 , 등등 여러가지 애니매이션과 모양의 그래프를 사용해볼수 있습니다.)

먼저 그래프를 그려볼 안드로이드 스튜디오 프로젝트를 생성합니다. 그리고 build.gradle 에 MPAndroidChart 를 추가합니다.

1.build.gradle 에 MPAndroidChart 의존 추가

MPAndroidChart 를 사용하기 위해 build.gradle 에 MPAndroidChart를 compile해 주어야 합니다. 그전에 MPAndroidChart를 repositories해 주어야합니다. 

	repositories {
	maven { url "https://jitpack.io" }
	}
	dependencies {
	compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'
	}

view raw chart0.java hosted with ❤ by GitHub

repositories 는 메이븐 repositories를 이용해 라이브러리를 관리하는 gradle 라이브러리 입니다.

dependencies 에 MPAndroidChart 를 추가해주고 repositories는 없다면 새로 만들어 줍니다.

2.activity 에 Chart 추가

MPAndroidChart 를 추가하였으면 액티비티에 차트를 추가합니다.

	<com.github.mikephil.charting.charts.LineChart
	android:id="@+id/chart"
	android:layout_width="match_parent"
	android:layout_height="match_parent" />

view raw gistfile1.txt hosted with ❤ by GitHub

샘플용 차트 프로젝트라 가로세로 사이즈를 모두 match_parent 로 주었습니다. 사용자에 맞게 설정 하시면 됩니다.

3.Chart세부 설정

차트설정을 하기위해 java class 파일을 수정합니다. (본 프로젝트에서는 MainActivity)

	public class MainActivity extends Activity{
	private LineChart lineChart;
	@Override
	public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	lineChart = (LineChart)findViewById(R.id.chart);
	List<Entry> entries = new ArrayList<>();
	entries.add(new Entry(1, 1));
	entries.add(new Entry(2, 2));
	entries.add(new Entry(3, 0));
	entries.add(new Entry(4, 4));
	entries.add(new Entry(5, 3));
	LineDataSet lineDataSet = new LineDataSet(entries, "속성명1");
	lineDataSet.setLineWidth(2);
	lineDataSet.setCircleRadius(6);
	lineDataSet.setCircleColor(Color.parseColor("#FFA1B4DC"));
	lineDataSet.setCircleColorHole(Color.BLUE);
	lineDataSet.setColor(Color.parseColor("#FFA1B4DC"));
	lineDataSet.setDrawCircleHole(true);
	lineDataSet.setDrawCircles(true);
	lineDataSet.setDrawHorizontalHighlightIndicator(false);
	lineDataSet.setDrawHighlightIndicators(false);
	lineDataSet.setDrawValues(false);
	LineData lineData = new LineData(lineDataSet);
	lineChart.setData(lineData);
	XAxis xAxis = lineChart.getXAxis();
	xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
	xAxis.setTextColor(Color.BLACK);
	xAxis.enableGridDashedLine(8, 24, 0);
	YAxis yLAxis = lineChart.getAxisLeft();
	yLAxis.setTextColor(Color.BLACK);
	YAxis yRAxis = lineChart.getAxisRight();
	yRAxis.setDrawLabels(false);
	yRAxis.setDrawAxisLine(false);
	yRAxis.setDrawGridLines(false);
	Description description = new Description();
	description.setText("");
	lineChart.setDoubleTapToZoomEnabled(false);
	lineChart.setDrawGridBackground(false);
	lineChart.setDescription(description);
	lineChart.animateY(2000, Easing.EasingOption.EaseInCubic);
	lineChart.invalidate();
	}
	}

view raw chart1.java hosted with ❤ by GitHub

1. LineChart 를 find해옵니다.

2. 리스트에 Entry 타입을 선언합니다. Entry타입 list는 그래프의 x축, y 축 값을 설정 할 수 있습니다. add(new Entry(x축1칸당 값, y값))

3. DataSet을 만듭니다. DataSet에 위에만든 Entry를 넣습니다. 그리고 그래프의 선색, 포인트지점의 원색, 등을 설정 할 수 있습니다.

4. XAxis, YAxis 로 x축속성, y축 속성을 설정 할 수 있습니다. (포지션, 색상 등)

5. 라인차트에 효과를 줄 수 있습니다. (차트 드래그,더블클릭,줌 효과, 애니매이션 효과 등)

이렇게 해서 간단한 꺾은선 그래프를 만들 수 있습니다.

하지만 이렇게 만들어진 그래프의 각 포인터지점 값을 알기 힘듭니다.

그래서 우리는 MarkerView 를 만들어 적용시킵니다. MarkerView 는 각 지점을 클릭했을시 그 지점의 데이터를 보여줍니다.

4. MarkerView 클래스 만들기.

	public class MyMarkerView extends MarkerView {
	private TextView tvContent;
	public MyMarkerView(Context context, int layoutResource) {
	super(context, layoutResource);
	tvContent = (TextView)findViewById(R.id.tvContent);
	}
	// callbacks everytime the MarkerView is redrawn, can be used to update the
	// content (user-interface)
	@Override
	public void refreshContent(Entry e, Highlight highlight) {
	if (e instanceof CandleEntry) {
	CandleEntry ce = (CandleEntry) e;
	tvContent.setText("" + Utils.formatNumber(ce.getHigh(), 0, true));
	} else {
	tvContent.setText("" + Utils.formatNumber(e.getY(), 0, true));
	}
	super.refreshContent(e, highlight);
	}
	@Override
	public MPPointF getOffset() {
	return new MPPointF(-(getWidth() / 2), -getHeight());
	}
	}

view raw Chart2.java hosted with ❤ by GitHub

5. MarkerView 레이아웃 만들기

마커뷰 레이아웃은 표시될 데이터의 폰트,색상 등을 지정해 줄 수 있습니다.

	<TextView
	android:id="@+id/tvContent"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerHorizontal="true"
	android:layout_marginTop="7dp"
	android:layout_marginLeft="5dp"
	android:layout_marginRight="5dp"
	android:text=""
	android:textSize="12dp"
	android:textColor="#00aaff"
	android:ellipsize="end"
	android:singleLine="true"
	android:textAppearance="?android:attr/textAppearanceSmall" />

view raw gistfile1.xml hosted with ❤ by GitHub

텍스트뷰 하나를 만듭니다.

6. LineChart 에 붙이기

만든 마커뷰를 라인차트에 붙입니다.

	MyMarkerView marker = new MyMarkerView(this,R.layout.markerviewtext);
	marker.setChartView(lineChart);
	lineChart.setMarker(marker);

view raw .java hosted with ❤ by GitHub

이렇게 만들어진 그래프입니다.

각 지점을 클릭하면 데이터를 보여줍니다.

이렇게 MPAndroidChart 를 이용하여 간단한 꺾은선 그래프를 만들어 보았습니다.

간단히 만든거라 허접하지만 다양한 옵션과 속성을 건드려보시면 더 깔끔하고 보기좋은 그래프를 만들 수 있습니다.