android 그래프 그리기 / MPandroidChart 라이브러리

안드로이드에서 그래프를 그리기 위해 MPandroidChart 라이브러리를 많이 사용한다.

프로젝트에서 사용중인 그래프도 MPandroidChart라는 라이브러리를 사용중이었고 

수정을 하기위해서 알아야했다. 처음엔 정말 너무 어려웠다. 시간도 많이걸렸다. 

 

https://github.com/PhilJay/MPAndroidChart

PhilJay/MPAndroidChart

 

요구 사항으로 개발해야할 목적은

1. linechart인데 한 chart안에 다수의 line이 들어가고 포인트를 찍어주는 점이 있는 그래프.

2. 똑같이 linechart 여러 line, 실시간으로 값을 받아와 실시간데이터를 구현하는 그래프.

또한 구현해야할 부분이 프라그먼트로 상속받은 곳이라는것.

 

해결책으로는

1. lineDataSet을 그려줄 그래프갯수 만큼 만들어주고 lineData에 담아서 차트.setData()에 넣어준다.

lineDataSet속성을 이용해 선두께,크기,색깔등 조정해주고 XAxis속성으로 x축 레이블 표시,

YAxis속성으로 y축 레이블 표시, Description으로 description표시, Legend로 밑에 범례?목차?같이 표시해줄수있다.

 private void setChart(ArrayList<Integer> keyList, ArrayList<Float> TotalAvg, ArrayList<Float> AmpAvg, ArrayList<Float> AvgSqrt, String label) {
        ArrayList<Entry> entriesQTotalAvg = new ArrayList<>();
        ArrayList<Entry> entriesQAmpTotalAvg = new ArrayList<>();
        ArrayList<Entry> entriesQTotalAvgSqrt = new ArrayList<>();

        // x축에 해당하는 값 넣는곳
        for (int i = 0; i < keyList.size(); i++) {
            entriesQTotalAvg.add(new Entry(keyList.get(i), TotalAvg.get(i)));
            entriesQAmpTotalAvg.add(new Entry(keyList.get(i), AmpAvg.get(i)));
            entriesQTotalAvgSqrt.add(new Entry(keyList.get(i), AvgSqrt.get(i)));
        }

        LineDataSet line_entriesQTotalAvg = new LineDataSet(entriesQTotalAvg, ""); // 라인 데이터를 만든다. 여러개를 만들 수도 있다.
        line_entriesQTotalAvg.setColor(Color.parseColor("#0000FF"));
        line_entriesQTotalAvg.setLineWidth(1);
        line_entriesQTotalAvg.setDrawHorizontalHighlightIndicator(false);
        line_entriesQTotalAvg.setDrawHighlightIndicators(false);
        line_entriesQTotalAvg.setDrawValues(false);
        line_entriesQTotalAvg.setDrawCircles(false);
        line_entriesQTotalAvg.setDrawCircleHole(false);

        LineDataSet line_entriesQAmpTotalAvg = new LineDataSet(entriesQAmpTotalAvg, ""); // 라인 데이터를 만든다. 여러개를 만들 수도 있다.
        line_entriesQAmpTotalAvg.setColor(Color.parseColor("#FF8000"));
        line_entriesQAmpTotalAvg.setLineWidth(1);
        line_entriesQAmpTotalAvg.setDrawHorizontalHighlightIndicator(false);
        line_entriesQAmpTotalAvg.setDrawHighlightIndicators(false);
        line_entriesQAmpTotalAvg.setDrawValues(false);
        line_entriesQAmpTotalAvg.setDrawCircles(false);
        line_entriesQAmpTotalAvg.setDrawCircleHole(false);

        LineDataSet line_entriesQTotalAvgSqrt = new LineDataSet(entriesQTotalAvgSqrt, ""); // 라인 데이터를 만든다. 여러개를 만들 수도 있다.
        line_entriesQTotalAvgSqrt.setColor(Color.parseColor("#FF0000"));
        line_entriesQTotalAvgSqrt.setLineWidth(1);
        line_entriesQTotalAvgSqrt.setDrawHorizontalHighlightIndicator(false);
        line_entriesQTotalAvgSqrt.setDrawHighlightIndicators(false);
        line_entriesQTotalAvgSqrt.setDrawValues(false);
        line_entriesQTotalAvgSqrt.setDrawCircles(false);
        line_entriesQTotalAvgSqrt.setDrawCircleHole(false);


        LineData lineData_entriesQTotalAvg = new LineData(line_entriesQTotalAvg, line_entriesQAmpTotalAvg, line_entriesQTotalAvgSqrt);


        mChart.setData(lineData_entriesQTotalAvg);
        mChart.setScaleEnabled(false);


        XAxis xAxis = mChart.getXAxis(); // x축
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // x축 레이블을 아래로 보여준다.
        xAxis.setTextColor(Color.WHITE);
        xAxis.setLabelCount(8); // x축 레이블 표시 개수

        YAxis yLAxis = mChart.getAxisLeft(); // y축 왼쪽
        yLAxis.setTextColor(Color.WHITE);
        yLAxis.setAxisMinimum(0);

        YAxis yRAxis = mChart.getAxisRight(); // y축 오른쪽
        yRAxis.setDrawLabels(false);
        yRAxis.setDrawAxisLine(false);
        yRAxis.setDrawGridLines(false);

//        Description description = new Description();
//        description.setText("unit : " + label);
//        description.setTextSize(18);
//        description.setTextColor(Color.WHITE);

        Legend l = mChart.getLegend(); //legend사용
        l.setWordWrapEnabled(true);
        LegendEntry l1 = new LegendEntry("QTotalAvgList", Legend.LegendForm.LINE, 10f, 2f, null, Color.parseColor("#0000FF"));
        LegendEntry l2 = new LegendEntry("QAmpTotalAvgList", Legend.LegendForm.LINE, 10f, 2f, null, Color.parseColor("#FF8000"));
        LegendEntry l3 = new LegendEntry("QTotalAvgSqrt", Legend.LegendForm.LINE, 10f, 2f, null, Color.parseColor("#FF0000"));

        l.setCustom(new LegendEntry[]{l1, l2, l3});
        l.setTextColor(Color.WHITE);
        l.setEnabled(true);
        mChart.getDescription().setEnabled(false);
        mChart.animateY(1000, Easing.EaseInCubic);
        mChart.invalidate();

    }

2. 똑같이 lineDataSet을 여러개 사용해서 line을 여러개 쓸수있고, 실시간값은 MVVM 아키텍쳐사용, livedata을 이용해

실시간으로 데이터를 받아볼수 있도록 설정한다.