MPAndroidChart円グラフの使用 PieChart

  MPAndroidChartの円グラフはAndroidプロジェクトで多用されるため、その使い方を総まとめ。

1. 紹介

  appの下のbuild.gradleが追加されます。

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

pieChart = findViewById(R.id.pie_chart);
pieChart.setNoDataText("No chart data available.");

2. 初期設定

pieChart.setData(pieData);

  初期化後は以下のようになります。

3. データ追加

  pieChartにデータを追加するのは1行のコードです。

PieData pieData = new PieData(pieDataSet);

  ここで、pieData は PieData 型のデータです。

PieDataSet pieDataSet = new PieDataSet(pieEntries, "");

  では、これからpieDataSetを取得します。

ArrayList
 name = new ArrayList<>(Arrays.asList("Excellent", "Good", "Moderate", "Pass", "Failed"));
List
 pieEntries = new ArrayList<>();
ArrayList
 rate = new ArrayList<>();
        // Calculate the percentage
for(int i = 0; i < 5; i++) {
    DecimalFormat df = new DecimalFormat("0.00%");
    String decimal = df.format(data[i] / (data[0] + data[1] + data[2] + data[3] + data[4]));
    PieEntry pieEntry = new PieEntry(data[i] / (data[0] + data[1] + data[2] + data[3] + data[4]), name.get(i));
    pieEntries.add(pieEntry);
    rate.add(decimal);
            //name[i] = name[i] + decimal;
}

  最終的にはpieEntriesに行き着くのです。

PieEntryを生成する

PieEntry pieEntry = new PieEntry(data[i] / (data[0] + data[1] + data[2] + data[3] + data[4]), name.get(i));

ArrayList
 colors = new ArrayList<>();
colors.add(Colors.parseColor("#6BE61A"));
colors.add(Color.parseColor("#4474BB"));
colors.add(Color.parseColor("#AA7755"));
colors.add(Color.parseColor("#BB5C44"));
colors.add(Color.parseColor("#E61A1A"));

PieDataSet pieDataSet = new PieDataSet(pieEntries, "");
pieDataSet.setSliceSpace(1f); //Set the distance between pie charts
pieDataSet.setColors(colors);
pieDataSet.setValueTextSize(0);

  ここで、data は PieEntry を生成する 5 つのセクターのそれぞれの比例した大きさを表す 5 つの整数を含んでいます。

pieDataSet.setValueTextSize(0);

PieData pieData = new PieData(pieDataSet);
pieChart.setData(pieData);
pieChart.setDrawCenterText(true);//Show middle text
pieChart.setCenterText(text1 + "\n" + text2);
pieChart.setCenterTextSize(20);//show middle text size
pieChart.setCenterTextColor(Color.parseColor("#3CC4C4")); middle text color
pieChart.setEntryLabelTextSize(0);//the label is not displayed
Description description = new Description();//Set the description
description.setText("");
pieChart.setDescription(description);

Legend legend = pieChart.getLegend();
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setTextSize(12);

セクタデータとカラーを設定します。

pieChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
    @Override
    public void onValueSelected(Entry e, Highlight h) {
        if(e == null) {
            return;
        }
        if(pieEntries.get(0).getValue() == e.getY()) {
            ToastUtil.showMessage(GradeRateActivity.this, name.get(0) + "percentage" + rate.get(0));
        }else if(pieEntries.get(1).getValue() == e.getY()) {
            ToastUtil.showMessage(GradeRateActivity.this, name.get(1) + "percentage" + rate.get(1));
        }else if(pieEntries.get(2).getValue() == e.getY()) {
            ToastUtil.showMessage(GradeRateActivity.this, name.get(2) + "percentage" + rate.get(2));
        }else if(pieEntries.get(3).getValue() == e.getY()) {
            ToastUtil.showMessage(GradeRateActivity.this, name.get(3) + "percentage" + rate.get(3));
        }else if(pieEntries.get(4).getValue() == e.getY()) {
            ToastUtil.showMessage(GradeRateActivity.this, name.get(4) + "percentage" + rate.get(4));
        }
    }

    @Override
    public void onNothingSelected() {

    }
});


pieChart.animateXY(1000, 1000);
pieChart.invalidate();

  All excellentやOnly excellent goodなど、1色か2色しか存在しない人もいることを考慮し、その場合、セクター内にラベルを設定すると、どうしても混雑して見えてしまうので、各セクターのラベルのフォントサイズを0に設定して表示しないようにしましょう。

pieDataSet.setValueTextSize(0);

PieDataを設定する

PieData pieData = new PieData(pieDataSet);
pieChart.setData(pieData);
pieChart.setDrawCenterText(true);//Show middle text
pieChart.setCenterText(text1 + "\n" + text2);
pieChart.setCenterTextSize(20);//show middle text size
pieChart.setCenterTextColor(Color.parseColor("#3CC4C4")); middle text color
pieChart.setEntryLabelTextSize(0);//the label is not displayed
Description description = new Description();//Set the description
description.setText("");
pieChart.setDescription(description);

レジェンドを設定する

Legend legend = pieChart.getLegend();
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setTextSize(12);

4. クリックイベント

  各セクターのパーセンテージデータを表示しないので、クリック後に対応するパーセンテージを表示する必要があります。

pieChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
    @Override
    public void onValueSelected(Entry e, Highlight h) {
        if(e == null) {
            return;
        }
        if(pieEntries.get(0).getValue() == e.getY()) {
            ToastUtil.showMessage(GradeRateActivity.this, name.get(0) + "percentage" + rate.get(0));
        }else if(pieEntries.get(1).getValue() == e.getY()) {
            ToastUtil.showMessage(GradeRateActivity.this, name.get(1) + "percentage" + rate.get(1));
        }else if(pieEntries.get(2).getValue() == e.getY()) {
            ToastUtil.showMessage(GradeRateActivity.this, name.get(2) + "percentage" + rate.get(2));
        }else if(pieEntries.get(3).getValue() == e.getY()) {
            ToastUtil.showMessage(GradeRateActivity.this, name.get(3) + "percentage" + rate.get(3));
        }else if(pieEntries.get(4).getValue() == e.getY()) {
            ToastUtil.showMessage(GradeRateActivity.this, name.get(4) + "percentage" + rate.get(4));
        }
    }

    @Override
    public void onNothingSelected() {

    }
});

5.invalidate()

pieChart.animateXY(1000, 1000);
pieChart.invalidate();

  ちなみに表示には1秒の遅延を設定してください。

6. 効果