关闭

[置顶] MPAndroidChart项目实战(五)——MPAndroidChart组合图

标签: MPAndroidChartMPAndroidChart组合图MPAndroidChart趋势图MPAndroidChart项目实战
1016人阅读 评论(4) 收藏 举报
分类:

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

MPAndroidChart常见设置属性(一)——应用层 
MPAndroidChart项目实战(一)——实现对比性柱状图 
MPAndroidChart项目实战(二)——双平滑曲线(双折线图)和MarkView实现 
MPAndroidChart项目实战(三)——饼状图实现和文字重合问题解决 
MPAndroidChart项目实战(四)——柱状图实现及X轴文字不显示问题和柱状图上显示文字 
MPAndroidChart X轴文字斜着显示 
MPAndroidChart项目实战(五)——组合图实现趋势图 
MPAndroidChart项目实战(六)——自定义1MPAndroidChart滑动冲突解决(搞不定产品设计师就只能搞自己) 
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<Entry> dottedLineData,solidLineData,以及X轴要显示的日期数据List<String> dataList;

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

    private void updataLineharts(){
        lineCharts = (LineChartInViewPager) mView.findViewById(R.id.trend_lineChart);
        List<Entry>[] 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<ILineDataSet> 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<Entry> []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



3
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    我的github简书订阅号和QQ群
    个人资料
    • 访问:133285次
    • 积分:3058
    • 等级:
    • 排名:第11798名
    • 原创:142篇
    • 转载:2篇
    • 译文:0篇
    • 评论:221条
    博客专栏
    打赏解答问题 微信扫描 支付宝扫描
    微信 支付宝
    友情链接
    最新评论