【GT-安卓应用开发之错题率统计】

前言：对于学生的答题（学习）情况，数据是直观的表现，在实际开发中也需要涉及到大量的数据统计与分析，我们经常通过图表结合来更加直观的展现数据。

        接下来，记录一下最近做的一个错题率统计与总成绩排行。整个界面是由上半部分的柱形图来展现错题记录，下半部分则是已提交（答题）人员的成绩排名。主要涉及到的几个点就是调用接口获取后台数据、数据的整理（排序）、数据的展现（包括柱形图与排行列表），我们按照开发的流程来了解。

        第一步，界面设计

        界面布局比较简单，直接贴代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.parentproject.activity.TJActivity">
    <RelativeLayout
        android:id="@+id/relative"
        style="@style/TitleStyle_Relative">

        <ImageView
            android:id="@+id/back"
            style="@style/TitleStyle_Back"
            android:layout_alignParentBottom="true" />

        <TextView
            android:id="@+id/title_tv"
            style="@style/TitleStyle_Text"
            android:layout_centerHorizontal="true"
            android:singleLine="true"
            android:text="错题率" />
    </RelativeLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="6"
        android:orientation="horizontal"
        android:layout_margin="@dimen/dp_10"
        android:background="@color/pink">
        <com.github.mikephil.charting.charts.BarChart
            android:id="@+id/bar_chart"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="@dimen/dp_20"/>
    </LinearLayout>
    <LinearLayout
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="5"
        android:orientation="vertical"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:id="@+id/zcjph">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp_10"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textColor="@color/pink"
                    android:gravity="center_horizontal"
                    android:text="姓名"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textColor="@color/pink"
                    android:gravity="center_horizontal"
                    android:text="排名"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textColor="@color/pink"
                    android:gravity="center_horizontal"
                    android:text="成绩"/>
            </LinearLayout>
            <ListView
                android:id="@+id/zcjph_lv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@null"
                android:paddingTop="@dimen/dp_10" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

        柱形图使用第三方库MPChartLib实现，这个库支持使用简单支持的样式较多，只不过如果直接导入到项目中的话会比较大，因此建议有时间的话还是熟悉一下代码，从而可以减去无关的代码和资源。这里附上一个网址方便大家熟悉https://blog.csdn.net/guijiaoba/article/details/41444697。

        第二步，获取后台数据

        我这里起两个请求，一个获取错题率另外一个则获取排名，共同调用一个方法，根据flag区分，

private void httpPost(final String flag) {
    if (flag.equals("tj")) {
        commitParam = new CommitParam();
        commitParam.setToken(token);
        commitParam.setId(classPID);
        commitParam.setClassPid(id);
        map = commitParam.getData();
        data = RetrofitBean.getApiApi().getDataExam("get_papers_tongji",map);
    }
    if (flag.equals("score")) {
        data = RetrofitBean.getApiApi().getZYList("get_student_post_papers", token, id, "score");
    }
    data.enqueue(new SimpleCallBack(flag) {
        @Override
        protected void showData(int i, String json) {
            super.showData(i, json);
            Gson gson = new Gson();
            if (flag.equals("tj")) {
                String result = "";
                try {
                    JSONObject jsonObject = new JSONObject(json);
                    result = jsonObject.getString("result");
                    JSONObject rstJson = new JSONObject(result);
                    Iterator it = rstJson.keys();
                    Map map = new TreeMap();
                    while (it.hasNext()) {
                        String key = it.next().toString();
                        String value = rstJson.getString(key);
                        map.put(key, value);
                    }
                    Iterator it1 = map.keySet().iterator();
                    String s = "";
                    while (it1.hasNext()) {
                        //it.next()得到的是key，tm.get(key)得到obj
                        Object obj = it1.next();
                        s += obj + "-" + map.get(obj).toString() + "+";
                    }

                    Log.e("map",s+"");
                    setDataChart(map);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
            if (flag.equals("score")) {
                mDataPg.clear();
                PGZY pgzy = gson.fromJson(json, PGZY.class);
                mDataPg.addAll(pgzy.getResult());
                myListViewAdapter = new MyListViewAdapter(getBaseContext(), mDataPg, "zcjph",0);
                zcjphLv.setAdapter(myListViewAdapter);
                myListViewAdapter.notifyDataSetChanged();
            }
        }
    });
}

        第三步，渲染柱形图数据

private void setDataChart(Map map) {
    //mBarData=getData(4,100);

    mChart.setOnChartValueSelectedListener(this);
    mChart.setDrawBarShadow(false);
    mChart.setDrawValueAboveBar(true);
    mChart.getDescription().setEnabled(false);
    mChart.setMaxVisibleValueCount(100);
    mChart.setPinchZoom(false);
    mChart.setDrawGridBackground(false);
    IAxisValueFormatter xAxisFormatter = new TmAxisValueFormatter(mChart, map);
    XAxis xAxis = mChart.getXAxis();
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    //xAxis.setTypeface(mTfLight);
    xAxis.setDrawGridLines(false);
    xAxis.setGranularity(1f); // only intervals of 1 day
    xAxis.setLabelCount(map.size());
    xAxis.setValueFormatter(xAxisFormatter);
    IAxisValueFormatter custom = new MyAxisValueFormatter();

    YAxis leftAxis = mChart.getAxisLeft();
    //leftAxis.setTypeface(mTfLight);
    leftAxis.setLabelCount(8, false);
    leftAxis.setValueFormatter(custom);
    leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
    leftAxis.setSpaceTop(15f);
    leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
    leftAxis.setAxisMaximum(100f);

    YAxis rightAxis = mChart.getAxisRight();
    rightAxis.setDrawGridLines(false);
    //rightAxis.setTypeface(mTfLight);
    rightAxis.setLabelCount(8, false);
    rightAxis.setValueFormatter(custom);
    rightAxis.setSpaceTop(15f);
    rightAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
    rightAxis.setAxisMaximum(100f);

    Legend l = mChart.getLegend();
    l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
    l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
    l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
    l.setDrawInside(false);
    l.setForm(Legend.LegendForm.SQUARE);
    l.setFormSize(9f);
    l.setTextSize(11f);
    l.setXEntrySpace(4f);

    XYMarkerView mv = new XYMarkerView(this, xAxisFormatter);
    mv.setChartView(mChart); // For bounds control
    mChart.setMarker(mv);

    setDataChartM(map);

    mChart.invalidate();


}

private void setDataChartM(Map map) {
    {
        float start = 1f;

        ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
        Iterator it1 = map.keySet().iterator();
        while (it1.hasNext()) {
            //it.next()得到的是key，tm.get(key)得到obj
            yVals1.add(new BarEntry(start, Float.parseFloat(map.get(it1.next()).toString())));
            start += 1;
        }


        BarDataSet set1;

        if (mChart.getData() != null &&
                mChart.getData().getDataSetCount() > 0) {
            set1 = (BarDataSet) mChart.getData().getDataSetByIndex(0);
            set1.setValues(yVals1);
            mChart.getData().notifyDataChanged();
            mChart.notifyDataSetChanged();
        } else {
            set1 = new BarDataSet(yVals1, "错题记录");

            set1.setDrawIcons(false);

            set1.setColors(ColorTemplate.MATERIAL_COLOR1);

            ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
            dataSets.add(set1);

            BarData data = new BarData(dataSets);
            data.setValueTextSize(10f);
            //data.setValueTypeface(mTfLight);
            data.setBarWidth(0.1f);

            mChart.setData(data);
        }
    }
}

     第四步，定义XY轴的格式

public class TmAxisValueFormatter implements IAxisValueFormatter {
    private BarLineChartBase<?> chart;
    private Map map;

    public TmAxisValueFormatter(BarLineChartBase<?> chart) {
        this.chart = chart;
    }
    public TmAxisValueFormatter(BarLineChartBase<?> chart, Map map) {
        this.chart = chart;
        this.map = map;
    }
    @Override
    public String getFormattedValue(float value, AxisBase axis) {
        Iterator iterator=map.keySet().iterator();
        int i =0;
        String vu = "";
        while (iterator.hasNext()){
            i++;
            Object obj = iterator.next();
            if(i==value){
               vu=obj.toString();
            }
        }
        return "第"+vu+"题";
    }
}

public class MyAxisValueFormatter implements IAxisValueFormatter
{

    private DecimalFormat mFormat;

    public MyAxisValueFormatter() {
        mFormat = new DecimalFormat("###,###,###,##0.0");
    }

    @Override
    public String getFormattedValue(float value, AxisBase axis) {
        return (int)value + " ％";
    }
}

      最后，贴上结果图