[안드로이드] 차트(Chart) - 데이터를 그래픽으로 표현 Bar, Pie, Radar

안드로이드

by aries574 2021. 1. 14. 15:19

2021/01/10 - [안드로이드] - [안드로이드] 리스트(RecyclerView) 와 바로가기메뉴(ContextMenu)

2021/01/11 - [안드로이드] - [안드로이드] 동적 메뉴(ActionMode) 만들어 보기

2021/01/12 - [안드로이드] - [안드로이드] 카메라(Camera) 사진(Image) 찍고 가져오기

2021/01/13 - [안드로이드] - [안드로이드]카메라(Camera) 저장공간 지정해서 고화질로 저장하기

이번 시간에는 데이터를 보기좋게 표현하는 차트를

안드로이드에서 표현하는 방법을 알아보겠습니다.

차트를 사용하기 위해서 라이브러리를 등록을 하겠습니다.

1. 라이브러리 등록

build.gradle(Module: 앱이름.app)

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

settings.gradle

maven { url "https://jitpack.io" } 추가

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        jcenter() // Warning: this repository is going to shut down soon
        maven { url "https://jitpack.io"}
    }
}
rootProject.name = "MaterialExam"
include ':app'

2. 메인화면 구현(activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="center"
    >

    <Button
        android:id="@+id/btn_barChart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="bar chart"
        />

    <Button
        android:id="@+id/btn_pieChart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="pie chart"
        />

    <Button
        android:id="@+id/btn_raderChart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="radar chart"
        />


</LinearLayout>

3. 차트 액티비티 생성(BarChartActivity, PieChartActivity, RadarChartActivity)

activity_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BarChartActivity">

    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/barChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

BarChartActivity.java


import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.utils.ColorTemplate;

import java.util.ArrayList;

public class BarChartActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bar_chart);

        BarChart barChart = findViewById(R.id.barChart);

        //샘플 데이터
        ArrayList<BarEntry> visitors = new ArrayList<>();
        visitors.add(new BarEntry(2014, 420));
        visitors.add(new BarEntry(2015, 450));
        visitors.add(new BarEntry(2016, 520));
        visitors.add(new BarEntry(2017, 620));
        visitors.add(new BarEntry(2018, 540));
        visitors.add(new BarEntry(2019, 720));
        visitors.add(new BarEntry(2020, 920));

        BarDataSet barDataSet = new BarDataSet(visitors, "Visitors");
        barDataSet.setColors(ColorTemplate.MATERIAL_COLORS);
        barDataSet.setValueTextColor(Color.BLACK);
        barDataSet.setValueTextSize(16f);

        BarData barData = new BarData(barDataSet);

        barChart.setFitBars(true);
        barChart.setData(barData);
        barChart.getDescription().setText("Bar Chart Example");
        barChart.animateY(2000);
    }
}

activity_pie_chart.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".PieChartActivity">

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

</androidx.constraintlayout.widget.ConstraintLayout>

PieChartActivity.java


import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.data.PieEntry;
import com.github.mikephil.charting.utils.ColorTemplate;

import java.util.ArrayList;

public class PieChartActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pie_chart);

        PieChart pieChart = findViewById(R.id.pieChart);

        //샘플데이터
        ArrayList<PieEntry> visitors = new ArrayList<>();
        visitors.add(new PieEntry(508, "2016"));
        visitors.add(new PieEntry(600, "2017"));
        visitors.add(new PieEntry(750, "2018"));
        visitors.add(new PieEntry(600, "2019"));
        visitors.add(new PieEntry(670, "2020"));

        PieDataSet pieDataSet = new PieDataSet(visitors, "Visitors");
        pieDataSet.setColors(ColorTemplate.COLORFUL_COLORS);
        pieDataSet.setValueTextColor(Color.BLACK);
        pieDataSet.setValueTextSize(16f);

        PieData pieData = new PieData(pieDataSet);

        pieChart.setData(pieData);
        pieChart.getDescription().setEnabled(false);
        pieChart.setCenterText("Visitors");
        pieChart.animate();
    }
}

activity_radar_chart_xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RadarChartActivity">

    <com.github.mikephil.charting.charts.RadarChart
        android:id="@+id/radarChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

RadarChartActivity.java


import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import com.github.mikephil.charting.charts.RadarChart;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.data.RadarData;
import com.github.mikephil.charting.data.RadarDataSet;
import com.github.mikephil.charting.data.RadarEntry;
import com.github.mikephil.charting.formatter.IndexAxisValueFormatter;

import java.util.ArrayList;

public class RadarChartActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radar_chart);

        RadarChart radarChart = findViewById(R.id.radarChart);

        //샘플 데이터
        ArrayList<RadarEntry> visitors = new ArrayList<>();
        visitors.add(new RadarEntry(420));
        visitors.add(new RadarEntry(347));
        visitors.add(new RadarEntry(333));
        visitors.add(new RadarEntry(458));
        visitors.add(new RadarEntry(584));
        visitors.add(new RadarEntry(693));

        RadarDataSet radarDataSet = new RadarDataSet(visitors, "visitors");
        radarDataSet.setColor(Color.RED);
        radarDataSet.setLineWidth(2f);
        radarDataSet.setValueTextColor(Color.RED);
        radarDataSet.setValueTextSize(14f);

        RadarData radarData = new RadarData();
        radarData.addDataSet(radarDataSet);

        String[] labels = {"2014","2015","2016","2017","2018","2019","2020"};

        XAxis xAxis = radarChart.getXAxis();
        xAxis.setValueFormatter(new IndexAxisValueFormatter(labels));

        radarChart.setData(radarData);
    }
}

4. 메인코드 구현(MainActivity.java)

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button btn_barChart = findViewById(R.id.btn_barChart);
Button btn_pieChart = findViewById(R.id.btn_pieChart);
Button btn_raderChart = findViewById(R.id.btn_raderChart);

btn_barChart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(getApplicationContext(), BarChartActivity.class));
}
});

btn_pieChart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(getApplicationContext(), PieChartActivity.class));
}
});

btn_raderChart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(getApplicationContext(), RadarChartActivity.class));
}
});
}
}

5. 뒤로가기 설정 (manifests -> AndroidManifest.xml)

등록된 액티비티 설정에 parentActivityName="액티비티이름" 설정 해주면

뒤로가기 버튼이 생성되며, 뒤로가기 버튼을 누르면 해당 액티비티로 이동합니다.

<activity android:name=".RadarChartActivity"
    android:parentActivityName=".MainActivity"
    ></activity>
<activity android:name=".PieChartActivity"
    android:parentActivityName=".MainActivity"
    />
<activity android:name=".BarChartActivity"
    android:parentActivityName=".MainActivity"
    />

6. 실행화면

Radar Chart

Pie Chart

Bar Chart

2021/01/10 - [안드로이드] - [안드로이드] 리스트(RecyclerView) 와 바로가기메뉴(ContextMenu)

2021/01/11 - [안드로이드] - [안드로이드] 동적 메뉴(ActionMode) 만들어 보기

2021/01/12 - [안드로이드] - [안드로이드] 카메라(Camera) 사진(Image) 찍고 가져오기

2021/01/13 - [안드로이드] - [안드로이드]카메라(Camera) 저장공간 지정해서 고화질로 저장하기

'안드로이드' 카테고리의 다른 글

[안드로이드]RecognizerIntent 음성을 텍스트(Text)로 전환시켜주는 방법 (0)	2021.01.16
[안드로이드] TextToSpeech 텍스트(Text)를 음성으로 전환시켜주는 방법 (0)	2021.01.15
[안드로이드]카메라(Camera) 저장공간 지정해서 고화질로 저장하기 (0)	2021.01.13
[안드로이드] 카메라(Camera) 사진(Image) 찍고 가져오기 (0)	2021.01.12
[안드로이드] 동적 메뉴(ActionMode) 만들어 보기 (0)	2021.01.11