Android图表控件MPAndroidChart——BarChart实现多列柱状图和LineChart多曲线 （完结）

首先才接触Android，目前自学一个月，花了一星期，做出了柱状图和曲线图，踩过坑也不少，上代码（主要提供思路，大部分代码可直接用）。

参考代码地址：①曲线：https://blog.csdn.net/ww897532167/article/details/74129478

　　　　　　　　　②柱状图：https://blog.csdn.net/ww897532167/article/details/74171294

　　　　　　　　　③MPAndroidChart 源码，Github 地址：https://github.com/PhilJay/MPAndroidChart。

效果图：

 

柱状图、曲线图。主要代码XML布局

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">
                <com.github.mikephil.charting.charts.BarChart
                    android:id="@+id/barChart"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:layout_marginBottom="20dp" />

            </LinearLayout>




  <LinearLayout
                android:id="@+id/ll_Routine_submit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">

                <com.github.mikephil.charting.charts.LineChart
                    android:id="@+id/lineChart"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:layout_marginBottom="20dp" />
            </LinearLayout>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="5dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="15dp">

                <TextView
                    android:id="@+id/tv_chart_so2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_toLeftOf="@+id/tv_chart_NOX"
                    android:drawableLeft="@mipmap/chart_cvt_icon"
                    android:drawablePadding="1dp"
                    android:text="S0₂(t)"
                    android:textColor="@color/black"
                    android:textSize="11dp" />

                <TextView
                    android:id="@+id/tv_chart_NOX"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_toLeftOf="@+id/tv_chart_klw"
                    android:drawableLeft="@mipmap/his_line_2"
                    android:drawablePadding="1dp"
                    android:text="NOX(t)"
                    android:textColor="@color/black"
                    android:textSize="11dp" />

                <TextView
                    android:id="@+id/tv_chart_klw"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_toLeftOf="@+id/tv_chart_fq"
                    android:drawableLeft="@mipmap/chart_val_icon"
                    android:drawablePadding="1dp"
                    android:text="颗粒物(t)"
                    android:textColor="@color/black"
                    android:textSize="11dp" />

                <TextView
                    android:id="@+id/tv_chart_fq"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="10dp"
                    android:drawableLeft="@mipmap/his_line_6"
                    android:drawablePadding="1dp"
                    android:text="废气(亿标m³)"
                    android:textColor="@color/black"
                    android:textSize="11dp" />
            </RelativeLayout>

 

 

一、声明变量。

public class GK_QSTab_Fragment extends Fragment implements View.OnClickListener, OnChartValueSelectedListener {
    private View mView;
    private TextView entnum_yc, scsss_ty, zwsss_ty, pks_cb, zwbj, pwbj;
    private Button qs_7sc, qs_7zl, qs_7fq, qs_7fs;
    private gkonlineModel model = null;
    private List<gkonlineModel> jkModelList = null;
    private Type type = new TypeToken<List<gkonlineModel>>() {
    }.getType();

    private BarChart barChart;
    private LineChart lineChart;
    private XAxis xAxisbar, xAxis;                //X轴
    private YAxis leftAxisbar, leftYAxis;            //左侧Y轴
    private YAxis rightAxisbar, rightYaxis;           //右侧Y轴
    private Legend legendbar, legend;              //图例
    private LimitLine limitLine;        //限制线
    //  private MyMarkerView markerView;    //标记视图 即点击xy轴交点时弹出展示信息的View 需自定义
    private int[] colors = new int[]{
            R.color.blue, R.color.cs, R.color.ls, R.color.his_line_color6
    };
}

二、获取数据，调用图表方法。josn数据可自己去获取。

    private class CallBackListener implements DoHttpRequest.CallbackListener {
        @Override
        public void callBack(String result) {
//            if (realtimeList_all != null && realtimeList_all.size() > 0) {
            entnum_yc.setText(model.QYYCSumCount);
            scsss_ty.setText(model.SCTYSumCount);
            zwsss_ty.setText(model.ZWTYSumCount);
            pks_cb.setText(model.PKCBSumCount);

            zwbj.setText(model.ZWSumCount);
            pwbj.setText(model.PWSumCount);
            initBarChart(barChart);
            initChart(lineChart);
            String json = "";
            Gson gson = new Gson();
            //把json序列化为List对象
            List<IncomeBean> list = gson.fromJson(json, new TypeToken<List<IncomeBean>>() {
            }.getType());
            ArrayList<ILineDataSet> dataSets = new ArrayList<>();
            for (int i = 0; i < 4; i++) {
                //加上渐变色+线条颜色
                LineDataSet set = showLineChart(list, getResources().getColor(colors[i]), i);
                dataSets.add(set);
                //                Drawable drawable = getResources().getDrawable(R.drawable.fade_blue);
//                setChartFillDrawable(drawable);
            }
            LineData data = new LineData(dataSets);
            lineChart.setData(data);
            xAxis.setValueFormatter(new IAxisValueFormatter() {
                @Override
                public String getFormattedValue(float value, AxisBase axis) {
                    String tradeDate = list.get((int) value % list.size()).getlEx();
                    return GK_QSTab_Fragment.DateUtil.formatDate(tradeDate);//获取日期
                }
            });
            xAxis.setLabelCount(6, false);//展示X数量
            leftYAxis.setLabelCount(5);//展示Y数量
            //选中 展示数据
            setMarkerView();

            //一周设施停运情况
            String barjosn = "";
//把json序列化为List对象
            List<IncomeBean> listbar = gson.fromJson(barjosn, new TypeToken<List<IncomeBean>>() {
            }.getType());
            ArrayList<IBarDataSet> dataSetsbar = new ArrayList<>();
            List<String> xValues = new ArrayList<>();
            for (IncomeBean valueBean : listbar) {
                xValues.add(valueBean.getlEx());
            }
            for (int i = 0; i < 2; i++) {
                //加上渐变色+线条颜色
                BarDataSet set = showBarChart(xValues,listbar, Name[i], getResources().getColor(colors[i]), i);
                dataSetsbar.add(set);
            }
            BarData bardata = new BarData(dataSetsbar);
            int barAmount = 2; //需要显示柱状图的类别 数量
            //设置组间距占比30% 每条柱状图宽度占比 70% /barAmount  柱状图间距占比 0%
            float groupSpace = 0.3f; //柱状图组之间的间距
            float barWidth = (1f - groupSpace) / barAmount;
            float barSpace = 0f;
            //设置柱状图宽度
            bardata.setBarWidth(barWidth);
            //(起始点、柱状图组间距、柱状图之间间距)
            bardata.groupBars(0f, groupSpace, barSpace);
            barChart.setData(bardata);
            xAxisbar.setAxisMaximum(7);//X 数量
            leftAxisbar.setLabelCount(5);//展示Y数量
//                setAdapter();
//            } else {
//                Toast.makeText(getActivity(), "数据请求失败", Toast.LENGTH_SHORT).show();
//            }
            if (getActivity() != null) {
                getActivity().removeDialog(UIEventListener.UI_EVENT_LOAD_DATA);
            }
        }
    }

三、调用对应样式和方法。

    private class Operating implements DoHttpRequest.OperatingDataListener {
        @Override
        public void callOperatingData(String result) throws ParseException, JSONException {
            if (result != null && !result.equals("")) {
                String json = "";
                Gson gson = new Gson();
                model = gson.fromJson(json, gkonlineModel.class);
//                model = gson.fromJson(result, gkonlineModel.class);
            }
        }
    }

    private void setAdapter() {
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_qs_7fq:
                initData();//请求数据
                break;
            case R.id.btn_qs_7fs:
                break;
        }
    }

    /**
     * 初始化BarChart图表
     */
    private void initBarChart(BarChart barChart) {
        /***图表设置***/
        Description description = new Description();
//        description.setText("需要展示的内容");
        description.setEnabled(false);
        barChart.setDescription(description);
        //背景颜色
        barChart.setBackgroundColor(Color.WHITE);
        //不显示图表网格
        barChart.setDrawGridBackground(false);
        //背景阴影
        barChart.setDrawBarShadow(false);
        barChart.setHighlightFullBarEnabled(false);
        //显示边框
        barChart.setDrawBorders(false);
        //设置动画效果
        barChart.animateY(1000);
        barChart.animateX(1000);
        barChart.setScaleEnabled(false); //是否支持缩放，默认true
        /***XY轴的设置***/
        //X轴设置显示位置在底部

        xAxisbar = barChart.getXAxis();
        xAxisbar.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxisbar.setAxisMinimum(0f);

//        xAxisbar.setAxisMaximum(6);
        //将X轴的值显示在中央
        xAxisbar.setCenterAxisLabels(true);
        xAxisbar.setGranularity(1f);


        leftAxisbar = barChart.getAxisLeft();
        rightAxisbar = barChart.getAxisRight();
        //保证Y轴从0开始，不然会上移一点
        leftAxisbar.setAxisMinimum(0f);
        rightAxisbar.setAxisMinimum(0f);
        //不显示X轴网格线
        xAxisbar.setDrawGridLines(false);
        //右侧Y轴网格线设置为虚线
        rightAxisbar.enableGridDashedLine(10f, 10f, 0f);
        rightAxisbar.setEnabled(false);//去掉右侧Y轴
        /***图例 标签 设置***/
        legendbar = barChart.getLegend();
        legendbar.setForm(Legend.LegendForm.SQUARE);
        legendbar.setTextSize(11f);
        //显示位置
        legendbar.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
        legendbar.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
        legendbar.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        //是否绘制在图表里面
        legendbar.setDrawInside(false);
    }

    /**
     * 柱状图始化设置 一个BarDataSet 代表一列柱状图
     *
     * @param barDataSet 柱状图
     * @param color      柱状图颜色
     */
    private void initBarDataSet(BarDataSet barDataSet, int color) {
        barDataSet.setColor(color);
        barDataSet.setFormLineWidth(1f);
        barDataSet.setFormSize(15.f);
        barDataSet.setDrawValues(true);//柱状图顶部值
//        barDataSet.setValueTextSize(10f);
//        barDataSet.setValueTextColor(color);
    }

    public BarDataSet showBarChart(List<String> xValues, List<IncomeBean> dataList, String name, int color, int ii) {
        List<BarEntry> entries = new ArrayList<>();
        for (int i = 0; i < dataList.size(); i++) {
            IncomeBean data = dataList.get(i);
            switch (ii) {
                case 0:
                    BarEntry entry = new BarEntry(i, (float) data.getlFQNUM());
                    entries.add(entry);
                    break;
                case 1:
                    BarEntry entry1 = new BarEntry(i, (float) data.getlFSNUM());
                    entries.add(entry1);
                    break;
            }

        }
        //X轴自定义值
        xAxisbar.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                String tradeDate= xValues.get((int) Math.abs(value) % xValues.size());
                return GK_QSTab_Fragment.DateUtil.formatDatebar(tradeDate);//获取日期
            }
        });
        // 每一个BarDataSet代表一类柱状图
        BarDataSet barDataSet = new BarDataSet(entries, name);
        initBarDataSet(barDataSet, color);
        return barDataSet;
    }

    /**
     * 初始化图表
     */
    private void initChart(LineChart lineChart) {
        /***图表设置***/
        //右下角还有一个描述标签 Descripition Lable
        Description description = new Description();
//        description.setText("需要展示的内容");
        description.setEnabled(false);
        lineChart.setDescription(description);

        //是否展示网格线
        lineChart.setDrawGridBackground(false);
        //是否显示边界
        lineChart.setDrawBorders(true);
        //是否可以拖动
        lineChart.setDragEnabled(false);
        //是否有触摸事件
        lineChart.setTouchEnabled(true);
        //设置XY轴动画效果
        lineChart.animateY(2500);
        lineChart.animateX(1500);

        /***XY轴的设置***/
        lineChart.setDrawBorders(false);//是否显示边界
        lineChart.getXAxis().setDrawGridLines(false);
        lineChart.getAxisRight().setDrawGridLines(false);
        lineChart.getAxisLeft().setDrawGridLines(true);//X Y轴网格线
        lineChart.getAxisLeft().enableGridDashedLine(10f, 10f, 0f);//设置X Y轴网格线为虚线（实体线长度、间隔距离、偏移量：通常使用 0）
        lineChart.getAxisRight().setEnabled(false);//去掉右侧Y轴

        xAxis = lineChart.getXAxis();
        leftYAxis = lineChart.getAxisLeft();
        rightYaxis = lineChart.getAxisRight();
        //X轴设置显示位置在底部
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setAxisMinimum(0f);
        xAxis.setGranularity(1f);
        //保证Y轴从0开始，不然会上移一点
        leftYAxis.setAxisMinimum(0f);
        rightYaxis.setAxisMinimum(0f);

        /***折线图例 标签 设置***/
        legend = lineChart.getLegend();
        //设置显示类型，LINE CIRCLE SQUARE EMPTY 等等 多种方式，查看LegendForm 即可
        legend.setForm(Legend.LegendForm.LINE);
        legend.setTextSize(12f);
        //显示位置 左下方
        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        //是否绘制在图表里面
        legend.setDrawInside(false);
        legend.setEnabled(false);//隐藏图列
    }

    /**
     * 曲线初始化设置 一个LineDataSet 代表一条曲线
     *
     * @param lineDataSet 线条
     * @param color       线条颜色
     * @param mode
     */
    private void initLineDataSet(LineDataSet lineDataSet, int color, LineDataSet.Mode mode) {
        lineDataSet.setColor(color);
        lineDataSet.setCircleColor(color);
        lineDataSet.setLineWidth(1.5f);
        lineDataSet.setCircleRadius(3f);
        lineDataSet.setDrawCircles(false);//*不显示点
        lineDataSet.setDrawValues(false);//*不显示值
        //显示值并对值 进行修改。
//        lineDataSet.setValueFormatter(new IValueFormatter() {
//            @Override
//            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
//                DecimalFormat df = new DecimalFormat(".00");
//                return df.format(value * 100) + "%";
//            }
//        });
        //设置曲线值的圆点是实心还是空心
        lineDataSet.setDrawCircleHole(false);
        lineDataSet.setValueTextSize(10f);
        //设置折线图填充
        lineDataSet.setDrawFilled(false);//线条背景色
        lineDataSet.setFormLineWidth(1f);
        lineDataSet.setFormSize(15.f);
        if (mode == null) {
            //设置曲线展示为圆滑曲线（如果不设置则默认折线）
            lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        } else {
            lineDataSet.setMode(mode);
        }
    }

    /**
     * 展示曲线
     *
     * @param dataList 数据集合
     * @param color    曲线颜色
     */
    public LineDataSet showLineChart(List<IncomeBean> dataList, int color, int ii) {
        List<Entry> entries = new ArrayList<>();
        for (int i = 0; i < dataList.size(); i++) {
            IncomeBean data = dataList.get(i);
            Entry entry = new Entry();
            switch (ii) {
                case 0:
                    entry = new Entry(i, (float) data.getlSO2PFL());//获取曲线值
                    break;
                case 1:
                    entry = new Entry(i, (float) data.getlNOXPFL());//获取曲线值
                    break;
                case 2:
                    entry = new Entry(i, (float) data.getlDUSTPFL());//获取曲线值
                    break;
                case 3:
                    entry = new Entry(i, (float) data.getlFQPFL() / 10000);//获取曲线值
                    break;
            }
            entries.add(entry);
        }
        // 每一个LineDataSet代表一条线
//        LineDataSet d = new LineDataSet(entries, name);
        LineDataSet d = new LineDataSet(entries, "");
        initLineDataSet(d, color, LineDataSet.Mode.LINEAR);
        return d;
    }

    /**
     * 数据获取到的时间为 20180502 我们需要显示 05-02 所以需要进行日期转换
     * 一个日期转换工具
     */
    public static class DateUtil {

        public static String formatDate(String str) {
            SimpleDateFormat sf1 = new SimpleDateFormat("yyyy-MM-dd HH:mm");
            SimpleDateFormat sf2 = new SimpleDateFormat("dd日HH时");
            String formatStr = "";
            try {
                formatStr = sf2.format(sf1.parse(str));
            } catch (ParseException e) {
                e.printStackTrace();
            }
            return formatStr;
        }

        public static String formatDatebar(String str) {
            SimpleDateFormat sf1 = new SimpleDateFormat("yyyy-MM-dd");
            SimpleDateFormat sf2 = new SimpleDateFormat("MM-dd");
            String formatStr = "";
            try {
                formatStr = sf2.format(sf1.parse(str));
            } catch (ParseException e) {
                e.printStackTrace();
            }
            return formatStr;
        }
    }

    /**
     * 设置线条填充背景颜色
     *
     * @param drawable
     */
    public void setChartFillDrawable(Drawable drawable) {
        if (lineChart.getData() != null && lineChart.getData().getDataSetCount() > 0) {
            LineDataSet lineDataSet = (LineDataSet) lineChart.getData().getDataSetByIndex(0);
            //避免在 initLineDataSet()方法中 设置了 lineDataSet.setDrawFilled(false); 而无法实现效果
            lineDataSet.setDrawFilled(true);
            lineDataSet.setFillDrawable(drawable);
            lineChart.invalidate();
        }
    }

    /**
     * 设置 可以显示X Y 轴自定义值的 MarkerView
     */
    public void setMarkerView() {
        LineChartMarkView mv = new LineChartMarkView(this.getActivity(), xAxis.getValueFormatter());
        mv.setChartView(lineChart);
        lineChart.setMarker(mv);
        lineChart.invalidate();
    }
    private final RectF onValueSelectedRectF = new RectF();
    //柱状图 点击明细
    public void onValueSelected(Entry e, Highlight h) {

        if (e == null)
            return;

        RectF bounds = onValueSelectedRectF;
        barChart.getBarBounds((BarEntry) e, bounds);
        MPPointF position = barChart.getPosition(e, YAxis.AxisDependency.LEFT);

        Log.i("bounds", bounds.toString());
        Log.i("position", position.toString());

        Log.i("x-index",
                "low: " + barChart.getLowestVisibleX() + ", high: "
                        + barChart.getHighestVisibleX());

        MPPointF.recycleInstance(position);
    }

    @Override
    public void onNothingSelected() {

    }

/*
 * 曲线点击图表查看 明细。主要注意 上标和下标，必须通过Textview 
 * */
public class LineChartMarkView extends MarkerView {

    private TextView tvDate,tvValue0,tvValue1,tvValue2,tvValue3,chart_so2;
    private IAxisValueFormatter xAxisValueFormatter;
    DecimalFormat df = new DecimalFormat(".00");

    public LineChartMarkView(Context context, IAxisValueFormatter xAxisValueFormatter) {
        super(context, R.layout.layout_markview);
        this.xAxisValueFormatter = xAxisValueFormatter;

        tvDate = findViewById(R.id.tv_date1);
        tvValue0 = findViewById(R.id.tv_value0);
        tvValue1 = findViewById(R.id.tv_value1);
        tvValue2 = findViewById(R.id.tv_value2);
        tvValue3 = findViewById(R.id.tv_value3);
    }

//    @SuppressLint("SetTextI18n")
    @Override
    public void refreshContent(Entry e, Highlight highlight) {
        //角标上标
        SpannableString m3 = new SpannableString("废气(亿标m3)：");
        m3.setSpan(new RelativeSizeSpan(0.5f), 6, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        m3.setSpan(new SuperscriptSpan(), 6, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);   //上标
        SpannableStringBuilder fqBuilder = new SpannableStringBuilder();
        fqBuilder.append(m3);
        //角标下标
        SpannableString B = new SpannableString("SO2(t)：");
        B.setSpan(new RelativeSizeSpan(0.5f), 2, 3, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);//一半大小
        B.setSpan(new SubscriptSpan(), 2, 3, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);   //上标
        SpannableStringBuilder SO2Builder = new SpannableStringBuilder();
        SO2Builder.append(B);

        Chart chart = getChartView();
        if (chart instanceof LineChart) {
            LineData lineData = ((LineChart) chart).getLineData();

            List<ILineDataSet> dataSetList = lineData.getDataSets();
            for (int i = 0; i < dataSetList.size(); i++) {
                LineDataSet dataSet = (LineDataSet) dataSetList.get(i);
                float y = dataSet.getValues().get((int) e.getX()).getY();
                switch (i){
                    case 0:
                        SO2Builder.append(Float.toString(y));
                        tvValue0.setText(SO2Builder);
                        break;
                    case 1:
                        tvValue1.setText("NOX(t)：" + "" + y);
                        break;
                    case 2:
                        tvValue2.setText("颗粒物(t)：" + "" + y);
                        break;
                    case 3:
                        fqBuilder.append(Float.toString(y));
                        tvValue3.setText(fqBuilder);
                        break;
                }
            }
            tvDate.setText(xAxisValueFormatter.getFormattedValue(e.getX(), null));
        }
        //???????X??? ???X??????
//        tvDate.setText(xAxisValueFormatter.getFormattedValue(e.getX(), null));
//        tvValue.setText("SO2(t)??" + e.getY());
        super.refreshContent(e, highlight);
    }

    @Override
    public MPPointF getOffset() {
        return new MPPointF(-(getWidth() / 2), -getHeight());
    }
}

曲线图点击x y 对应值的页面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/shape_square"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_date1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white" />

    <TextView
        android:id="@+id/tv_value0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:textColor="@android:color/white" />
    <TextView
        android:id="@+id/tv_value1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:textColor="@android:color/white" />
    <TextView
        android:id="@+id/tv_value2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:textColor="@android:color/white" />
    <TextView
        android:id="@+id/tv_value3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:textColor="@android:color/white" />

</LinearLayout>