MPAndroidChart 를 사용해 2개 이상의 꺾은선 그래프를 작성한다【Java】

이 기사를 쓰려고 생각한 이유



Android 앱 제작 초보자입니다.
텍스트나 웹 검색으로 어떻게든 형태 있는 것을 만들고 있습니다만, 생각의 기본이 좀처럼 익히지 않고 참고가 될 것 같은 코드를 언제나 찾아 돌고 있습니다.
이번 데이타베이스와 접속해 그 데이터를 이용한 2개의 꺾은선 그래프를 작성했습니다만, 라인 2번째의 기술을 모르고 고전했으므로 여기에 기록하고 싶습니다.

참고



머니 포워드 엔지니어 블로그 (Android : 그래프 표시로 표현 풍부하게. MPAndroidChart를 사용해 보자!)
nyan의 앱 개발 ([Android] MPAndroidChart 라이브러리로 그래프 그리기)  ← 많은 기사가 실려 있는 블로그입니다. 전반적으로 신세를 졌습니다.

환경



Windows10
AndroidStudio4

그래프 초기화



MPAndroidChart의 도입이나 레이아웃은 참고 사이트를 봐 주세요.
내가 사용하지 않았던 메소드도 코멘트 아웃 해 몇 개 싣고 있습니다.

LineChartActivity.java
LineChart mChart = findViewById(R.id.lineChart);
        // グラフ説明テキストを表示するか
        mChart.getDescription().setEnabled(true);
        // グラフ説明テキスト(アプリ名など)
        mChart.getDescription().setText(getResources().getString(R.string.app_name));
        // グラフ説明テキストの文字色設定
        //mChart.getDescription().setTextColor(Color.BLACK);
        // グラフ説明テキストの文字サイズ設定
        //mChart.getDescription().setTextSize(10f);
        // グラフ説明テキストの表示位置設定
        //mChart.getDescription().setPosition(0, 0);
        // グラフの背景色
        mChart.setBackgroundColor(Color.WHITE);

        // x軸の設定
        XAxis xAxis = mChart.getXAxis();
        // x軸を斜めに出力
        xAxis.setLabelRotationAngle(45);
        // x軸最大値最小値
        // 以下だと0~9番目が出力される(10個)書かないと、登録したデータ分表示される
        xAxis.setAxisMinimum(0f);
        xAxis.setAxisMaximum(9f);
        // データベースに登録した年月日をx軸に設定
        xAxis.setValueFormatter(new IndexAxisValueFormatter(getDate()));

        // x軸を破線にする(Dashed Line)
        xAxis.enableGridDashedLine(10f, 10f, 0f);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

        // y軸の設定
        YAxis yAxis = mChart.getAxisLeft();
        // Y軸最大最小設定
        yAxis.setAxisMaximum(150f);
        yAxis.setAxisMinimum(50f);
        // y軸を破線にする
        yAxis.enableGridDashedLine(10f, 10f, 0f);
        yAxis.setDrawZeroLine(true);

        // 右側の目盛り。不要ならfalse
        mChart.getAxisRight().setEnabled(false);

x축 설정



x축 설정의 getDate 메소드입니다.
데이터베이스에 등록한 데이터 유형을 변경해야 했습니다.
더 스마트하게 쓸 수 있을 것 같습니다만, 지금의 나에서는 여기까지입니다.
변수 date 는 데이터베이스의 데이터를 보관 유지하고 있는 ArrayList 입니다.

LineChartActivity.java
// String型で保存したデータをdate型に書き直して SimpleDateFormat
private  ArrayList<String> getDate() {
        ArrayList<String> dateLabels = new ArrayList<>();
        for (int i = 0; i < date.size(); i++) {
            try {
                // 年月日を月日に修正
                String strDate = date.get(i);
                DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd");
                Date entryDate = dateFormat.parse(strDate);
                DateFormat dt = new SimpleDateFormat("MM/dd");
                String setDate = dt.format(entryDate);
                dateLabels.add(setDate);
            } catch (ParseException e) {
                e.printStackTrace();
            }
        }
        return dateLabels;
    }

데이터 표시



변수 valuesMax 와 valuesMin 은 데이터베이스의 데이터를 보관 유지하고 있는 ArrayList 입니다.

LineChartActivity.java
ArrayList<Entry> valuesMax = new ArrayList<>();
ArrayList<Entry> valuesMin = new ArrayList<>();
        LineDataSet max;   // ライン引数
        LineDataSet min;   
// ラインの設定メソッド
        max = new LineDataSet(valuesMax, "A");// ラベルの名前
        max.setColor(Color.RED);          // 線の色
        max.setCircleColor(Color.RED);    // 座標の色
        max.setLineWidth(5f);             // 線の太さ 1f~
        max.setCircleRadius(5f);          // 座標の大きさ
        max.setDrawCircleHole(false);     // 座標を塗りつぶす→false 塗りつぶさない→true
        max.setValueTextSize(10f);        // データの値を記す。0fで記載なし。floatだから小数点がつく
        max.setDrawFilled(true);          // 線の下を塗りつぶすか否か
        max.setFillColor(Color.RED);      // 塗りつぶしたフィールドの色

// もう1セット作る
        min = new LineDataSet(valuesMin, "B");
        min.setColor(Color.BLUE);
        min.setCircleColor(Color.BLUE);
        min.setLineWidth(5f);
        min.setCircleHoleRadius(5f);
        min.setDrawCircleHole(false);
        min.setValueTextSize(10f);
        min.setDrawFilled(true);
        min.setFillColor(Color.BLUE);

        // chartにラインをset
        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
        dataSets.add(max);
        dataSets.add(min);
        LineData lineData = new LineData(dataSets);
        mChart.setData(lineData);
        // データをアニメーションで出す。ミリ秒.数値が大きいと遅い
        mChart.animateX(1000);

ILineDateSet에 추가한 라인이 화면에 표시됩니다.

완성된 것



두 개의 그래프가 표시되었습니다.
채우기를 빨강과 파랑으로 했습니다만, 파랑 라인 아래는 섞여 보라색이 되어 있네요◎
도움이되면 다행입니다.

좋은 웹페이지 즐겨찾기