[android studio] MPAndroidChart 차트 구현하기

android에서 차트 라이브러리 중 제일 많이 사용되고 있다는 MPAndroidChart 차트를
구현해 보았다.

Philipp Jahoda라는 개발자가 만든 차트 라이브러리다.

먼저, gradle에 라이브러리를 추가하고

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

    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' 


}

 

차트를 추가할 Layout에 차트 Component를 추가해준다.

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

 

다음으로 java코드에서 해당 차트의 설정 및 데이터를 넣어 차트를 완성해 준다.

LineChart chart = (LineChart)findViewById(R.id.chart);

ArrayList<Entry> val = new ArrayList<>();

val.add(new Entry((float) x축값, (float) y축값, getResources().getDrawable(R.drawable.star)));


{   // // Chart Style // //

// background color
chart.setBackgroundColor(Color.rgb(212, 244, 250));

// disable description text
chart.getDescription().setEnabled(false);

// enable touch gestures
chart.setTouchEnabled(true);

// set listeners
//chart.setOnChartValueSelectedListener(this);
chart.setDrawGridBackground(false);

// 값이 선택될 때 상자를 표시할 마커 만들기
//MyMarkerView mv = new MyMarkerView(getActivity(), R.layout.custom_marker_view);
// 차트에 마커 설정
//mv.setChartView(chart);
//chart.setMarker(mv);

// 크기 조정 및 드래그 활성화
chart.setDragEnabled(true);
chart.setScaleEnabled(true);
// chart.setScaleXEnabled(true);
// chart.setScaleYEnabled(true);

// 두 축을 따라 강제로 핀치 줌
chart.setPinchZoom(true);
}

XAxis xAxis;
{   // // X-Axis Style // //
xAxis = chart.getXAxis();

//위치를 아래쪽
//xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

// 수직 격자선
xAxis.enableGridDashedLine(5f, 5f, 0f);

//수직 범례 색상
xAxis.setTextColor(Color.BLACK);
xAxis.setAxisLineColor(Color.BLACK);

//그래프 좌우 여백
xAxis.setSpaceMax(0.3f);
xAxis.setSpaceMin(0.3f);
}

YAxis yAxis;
{   // // Y-Axis Style // //
yAxis = chart.getAxisLeft();

// 이중 축 비활성화(왼쪽 축만 사용)
chart.getAxisRight().setEnabled(false);

//수평 격자선
yAxis.enableGridDashedLine(10f, 10f, 0f);

//수평 범례색상
yAxis.setTextColor(Color.BLACK);
yAxis.setAxisLineColor(Color.BLACK);

// axis range
yAxis.setAxisMaximum(30f);
yAxis.setAxisMinimum(-10f);
}

LineDataSet set1;

// set data
if (chart.getData() != null &&
chart.getData().getDataSetCount() > 0) {
set1 = (LineDataSet) chart.getData().getDataSetByIndex(0);
set1.setValues(val);
set1.notifyDataSetChanged();
chart_WaterTemp.getData().notifyDataChanged();
chart_WaterTemp.notifyDataSetChanged();
} else {
set1 = new LineDataSet(val_WaterTemp, "값 설명");

//Cubic Line Chart
set1.setMode(LineDataSet.Mode.CUBIC_BEZIER);

set1.setDrawIcons(false);

// draw dashed line
set1.enableDashedLine(10f, 5f, 0f);
// lines and points
set1.setColor(Color.WHITE);
set1.setCircleColor(Color.WHITE);
// 선 두께 및 포인트 크기
set1.setLineWidth(1f);
set1.setCircleRadius(2f);
// 점을 실선으로 그립니다
set1.setDrawCircleHole(false);
// 범례 항목 사용자 정의
set1.setFormLineWidth(1f);
set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f));
set1.setFormSize(15.f);
// values 텍스트 크기
set1.setValueTextSize(9f);
// 점선으로 선택 선 그리기
set1.enableDashedHighlightLine(10f, 5f, 0f);

// 채워진 영역 설정
set1.setDrawFilled(true);
set1.setFillFormatter(new IFillFormatter() {
@Override
public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) {
return chart.getAxisLeft().getAxisMinimum();
}
});

// set color of filled area
if (Utils.getSDKInt() >= 18) {
// drawables only supported on api level 18 and above
Drawable drawable = ContextCompat.getDrawable(getActivity(), R.drawable.fade_light);
set1.setFillDrawable(drawable);
} else {
set1.setFillColor(Color.WHITE);
}

//값 형식 포맷맷
set1.setValueFormatter(new MyValueFormatter());

ArrayList<ILineDataSet> dataSets = new ArrayList<>();
dataSets.add(set1); // add the data sets

// create a data object with the data sets
LineData data = new LineData(dataSets);


chart.setData(data);
}

//최대 X좌표 기준으로 몇개를 보여줄 것인지
chart.setVisibleXRangeMaximum(12);
//가장 최근에 추가한 데이터의 위치로 이동처리
chart.moveViewToX(set1.getEntryCount());

chart.animateX(1500);

// 범례 가져오기(데이터 설정 후에만 가능)
Legend l = chart.getLegend();
// 범례 항목을 선으로 그리기
l.setForm(Legend.LegendForm.LINE);

 

마커 만들기 부분은 주석처리를 하였는데, 그래프에서 값을 클릭할 경우 Text상자가 나타나서 해당 값을
보여주는 기능이다.
해당 부분은 필요치않아 주석처리를 하였다.

실행시 아래와 같은 그래프 결과를 얻을 수 있었다.

 

위에 Chart는 Line차트를 사용하였는데 GitHub에 라이브러리를 참조하면 다양한 차트와 속성을 찾아서
사용가능할 것이다.

아래 GitHub에 들어가서 상세히 확인해 보는것을 추천한다.

https://github.com/PhilJay/MPAndroidChart

GitHub - PhilJay/MPAndroidChart: A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubb