MPAndroidChart项目实战（五）——MPAndroidChart组合图

本文出自：http://blog.csdn.net/dt235201314/article/details/75009573

MPAndroidChart常见设置属性（一）——应用层 
MPAndroidChart项目实战（一）——实现对比性柱状图 
MPAndroidChart项目实战（二）——双平滑曲线（双折线图）和MarkView实现 
MPAndroidChart项目实战（三）——饼状图实现和文字重合问题解决 
MPAndroidChart项目实战（四）——柱状图实现及X轴文字不显示问题和柱状图上显示文字 
MPAndroidChart X轴文字斜着显示 
MPAndroidChart项目实战（五）——组合图实现趋势图 
MPAndroidChart项目实战（六）——自定义1MPAndroidChart滑动冲突解决（搞不定产品设计师就只能搞自己） 
MPAndroidChart项目实战（七）——自定义横向柱状图 
MPAndroidChart项目实战（八）——自定义分段堆积柱状图 
MPAndroidChart项目实战（九）——自定义带文字分段堆积柱状图 

一丶效果演示（源码链接见文末，欢迎Star）

二丶功能点技术点

1.MPAndroidChart组合图使用(平滑曲线，折线（效果图里的直线）)

2.趋势图分析，趋势图的实现

3.markView不显示趋势线上的数据

4.MPAndroidChart数据精度问题解决

5.markView显示数据格式问题解决

三丶核心代码

1.趋势图，趋势线的形成，其实是计算好的数据，计算公式看图（也可以自行百度）

移动端就爽啦，后台直接算好了给我们。

第一步数据处理（这里就不再像前面那样转化成实体类再转回来了）：

public void getData(){
    String data ="{\"exponentList\":[{\"dottedLineData\":\"0.0109\",\"exponentDate\":\"07-04\",\"solidLineData\":\"0.0099\"}," +
            "{\"dottedLineData\":\"0.0102\",\"exponentDate\":\"07-05\",\"solidLineData\":\"0.0039\"}," +
            "{\"dottedLineData\":\"0.0095\",\"exponentDate\":\"07-06\",\"solidLineData\":\"0.0084\"}," +
            "{\"dottedLineData\":\"0.0088\",\"exponentDate\":\"07-07\",\"solidLineData\":\"0.0195\"}," +
            "{\"dottedLineData\":\"0.0081\",\"exponentDate\":\"07-08\",\"solidLineData\":\"0.0148\"}," +
            "{\"dottedLineData\":\"0.0073\",\"exponentDate\":\"07-09\",\"solidLineData\":\"0.0035\"}," +
            "{\"dottedLineData\":\"0.0066\",\"exponentDate\":\"07-10\",\"solidLineData\":\"0.0013\"}],\"overviewName\":\"负面舆情指数\"}";
    try {
        JSONObject object = new JSONObject(data);
        JSONArray jsonArray = object.getJSONArray("exponentList");
        dottedLineData = new ArrayList<>();
        solidLineData = new ArrayList<>();
        dataList = new ArrayList<>();
        BigDecimal scale = new BigDecimal(100);
        for (int i = 0, count = jsonArray.length(); i < count; i++) {
            //改了这里
            JSONObject jsonObject = jsonArray.optJSONObject(i);
            String dottedData = jsonObject.optString("dottedLineData");
            String solidData = jsonObject.optString("solidLineData");
            String exponentDate = jsonObject.optString("exponentDate");
            BigDecimal solid = new BigDecimal(solidData);
            BigDecimal dotted = new BigDecimal(dottedData);
            dottedLineData.add(new Entry(i,scale.multiply(solid).floatValue()));
            solidLineData.add(new Entry(i,scale.multiply(dotted).floatValue()));
            if ( Float.valueOf(dottedData)> maxData) {
                maxData = Float.valueOf(dottedData);
            }
            if (Float.valueOf(solidData)>maxData){
                maxData=Float.valueOf(solidData);
            }
            dataList.add(exponentDate);
        }
    } catch (JSONException e) {
        e.printStackTrace();
    }
}

这里得到平滑曲线上要展示的两条线的数据private List dottedLineData,solidLineData，以及X轴要显示的日期数据List dataList;

第二步：图标属性设置及属性

    private void updataLineharts(){
        lineCharts = (LineChartInViewPager) mView.findViewById(R.id.trend_lineChart);
        List[] entries = new ArrayList[2];
        entries[1] = dottedLineData;
        entries[0] = solidLineData;
        int[] cahrtColors = {Color.parseColor("#F0C330"), Color.parseColor("#50C4D9")};

        String[] labels = {"TCL", "趋势线"};
        boolean[] hasDotted = {true, false};
        final LineChartEntity lineChartEntity = new LineChartEntity(lineCharts, entries, labels, hasDotted,
                cahrtColors, R.color.black99, 12f);

        lineCharts.getAxisLeft().setAxisMaximum(maxData*120f);
        lineCharts.getAxisLeft().setAxisMinimum(0f);
        lineCharts.getAxisLeft().setGranularity(0.1f);
        lineCharts.getLegend().setEnabled(false);
        /*设置横坐标的最小宽度*/
        lineCharts.getAxisLeft().setMinWidth(25);
        lineCharts.getAxisRight().setMinWidth(25);
        lineCharts.getXAxis().enableGridDashedLine(10f, 0f, 0f);
        lineCharts.getXAxis().setGridLineWidth(0.5f);
        lineCharts.getXAxis().setGridColor(Color.parseColor("#9E9E9E"));
        lineChartEntity.setAxisFormatter(
                new IAxisValueFormatter() {

                    @Override
                    public String getFormattedValue(float value, AxisBase axis) {

                        String xValueTemp = mFormat.format(value);
                        float transferValue = value;
                        int index;
                        {
                            if (xValueTemp.contains(".")) {
                                return "";
                            }
                            index = (int) value;
                            index = Math.abs(index);
                        }

                        if (index < 0) {
                            return "";
                        }

                        if (index >= dottedLineData.size()) {
                            return "";
                        }
                        String timeTemp = dataList.get(index);
                        return timeTemp;
                    }

                }, new IAxisValueFormatter() {
                    @Override
                    public String getFormattedValue(float value, AxisBase axis) {
                        return mFormat.format(value) + "%";
                    }
                }
        );
        lineChartEntity.setLineMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
        lineChartEntity.initLegend(Legend.LegendForm.CIRCLE, 13f, Color.parseColor("#999999"));
        lineChartEntity.updateLegendOrientation(Legend.LegendVerticalAlignment.TOP, Legend.LegendHorizontalAlignment.RIGHT, Legend.LegendOrientation.HORIZONTAL);
        lineCharts.getData().setDrawValues(false);
        lineCharts.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        if(dataList.size()>1)
//        lineCharts.getXAxis().setLabelRotationAngle(-30);
            lineCharts.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    lineCharts.getViewTreeObserver().removeOnPreDrawListener(this);
                    int width = lineCharts.getWidth();
                    if(dataList.size()>0){
                        String xAxis = dataList.get(0);
                        int totalWidth = (int) (dataList.size() * lineCharts.getResources().getDisplayMetrics().density * xAxis.length()*9);
                        float scale = (float) totalWidth / width;
                        if (scale < 1) {
                            scale = 1;
                        }
                        lineChartEntity.setMinMaxScaleX(scale, scale);
                    }else{
                        lineChartEntity.setMinMaxScaleX(1.0f, 1.0f);
                    }
                    return false;
                }
            });
        
        final NewMarkerView markerView = new NewMarkerView(getActivity(), R.layout.custom_marker_view_layout,false);
        markerView.setCallBack(new NewMarkerView.CallBack() {
            @Override
            public void onCallBack(float x, String value) {
                int index = (int) x;
                if (index >= dataList.size()) {
                    return;
                }

                if(!TextUtils.isEmpty(value)){
                    float data = Float.parseFloat(value);
                    BigDecimal solid = new BigDecimal(dottedLineData.get(index).getY());
                    BigDecimal scale = new BigDecimal(100);
                    float solidInvert = solid.multiply(scale).floatValue();
                    if(solidInvert==data*100){
                        markerView.getTvContent().setVisibility(View.VISIBLE);
                        markerView.getTvContent().setText(dataList.get(index) + "\n" + mFormat.format(data)+ "%");
                    }
                    else{
                        markerView.getTvContent().setVisibility(View.INVISIBLE);
                    }
                }else{
                    markerView.getTvContent().setText( dataList.get(index)+ "\n" + "%");
                }
            }
        });
        lineChartEntity.setMarkView(markerView);
        LineDataSet.Mode[] modes = new LineDataSet.Mode[2];
        modes[0] =  LineDataSet.Mode.LINEAR;
        modes[1] = LineDataSet.Mode.HORIZONTAL_BEZIER;
        lineChartEntity.setLineMode(modes);
    }

这里基本的属性和前面的设置类似，也有几点改进

1.数据提升精确度，运用BigDecimal

2.不同modes的图形样式（这里是折线和平滑曲线）

这里在lineChartEntity设置

/**
 * 设置图表颜色值,组合图
 * @param modes LineDataSet.Mode
 */
public void setLineMode (LineDataSet.Mode[] modes) {
    List sets = ((LineChart)mChart).getData().getDataSets();
    for (int index = 0, len = sets.size(); index < len; index ++) {
        LineDataSet set = (LineDataSet) sets.get(index);
        if (index < modes.length) {
            set.setMode(modes[index]);
        }
    }
    mChart.invalidate();
}

3.markView的显示设置

这里加判断，当点击获取的点在平滑曲线上也就是真实值时才会显示

markView显示格式控制代码

/*部分数据不需要格式化处理*/
public NewMarkerView(Context context, int layoutResource,boolean needFormat) {
    super(context, layoutResource);
    this.needFormat = needFormat;
    tvContent = (TextView) findViewById(R.id.tvContent);
}

@Override
public void refreshContent(Entry e, Highlight highlight) {

    String values;
    if (e instanceof CandleEntry) {
        CandleEntry ce = (CandleEntry) e;
        values = "" + Utils.formatNumber(ce.getHigh(), 0, true);
    } else {
        if(!needFormat){
            values=""+e.getY();
        }else{
            values = "" + Utils.formatNumber(e.getY(), 0, true);
        }
    }

    if (mCallBack != null) {
        mCallBack.onCallBack(e.getX(), values);
    }
    super.refreshContent(e, highlight);
}

4.让折线图看起来像直线（隐藏数据的点）

public LineChartEntity (LineChart lineChart, List []entries, String[] labels,boolean[] hasDotted,
                        int []chartColor, int valueColor, float textSize) {
    super(lineChart, entries, labels, chartColor, valueColor, textSize,hasDotted);
    this.hasDotted = hasDotted;
}

if (hasDotted!=null&&hasDotted[index]) {
    lineDataSet[index].setDrawCircles(false);
    lineDataSet[index].setCircleColor(R.color.white);
    lineDataSet[index].enableDashedLine(10f, 15f, 0f);
    lineDataSet[index].enableDashedHighlightLine(10f, 15f, 0f);
}

四丶跪求关注下载源码，200粉小目标
欢迎关注我的博客及微信公众号，后面会给大家带来更多相关MPAndroidChart无法解决的仿MPAndroidChart图标自定义控件
源码下载记得顺便Star哦~
下载链接： https://github.com/JinBoy23520/MPAndroidChartDemoByJin