Android统计表格MPAndroidChart解析

项目地址:https://github.com/PhilJay/MPAndroidChart

Remember: It's all about the looks.

Android统计表格MPAndroidChart解析_第1张图片

MPAndroidChart is a powerful & easy to use chart library for Android. It runs on API level 8 and upwards.

As an additional feature, this library allows cross-platform development between Android and iOS as an iOS version of this library is also available: Charts

大概的意思是:MPAndroidChart是一个Android平台上功能全且上手简单的统计表格库,适用于API8以上的Android版本.还有一个额外的功能是,这个库是一个支持跨ios和Android平台的第三库,ios中称之为charts.

好了!装完逼了,回到正题.MPAndroidChart是Android平台中比较牛X的一个开源第三方统计图表库了,可以绘制样式复杂、丰富的各种统计图表，如一般常见的折线图、饼状图、柱状图、散点图等等

它支持很多种统计图表:

LineChart (with legend, simple design)

Android统计表格MPAndroidChart解析_第2张图片

BarChart (with legend, simple design)

Android统计表格MPAndroidChart解析_第3张图片 PieChart (with selection, ...) Android统计表格MPAndroidChart解析_第4张图片

简言之，AndroidMPChart基本上可以满足日常在Android平台上的统计图表开发需要。

导入方式呢可以由开发者自己选择,你可以选择以modules形式导入,下载官方的zip包,也可以直接gradle导入,简单粗暴.

 repositories {        maven { url "https://jitpack.io" }    }dependencies {    compile 'com.github.PhilJay:MPAndroidChart:v2.1.6'}

导入后就可以使用了.

PieChart饼状图

直接放入布局文件:

初始化组件并给设置数据:

pieChart = (PieChart) findViewById(R.id.pichart);        List title = new ArrayList<>();        for (int i = 0; i < 4; i++) {            title.add("我" + i);            list.add(new Entry(10 * (i + 1), i));            sum += 10 * (i + 1);        }        //添加数据        PieDataSet dataset = new PieDataSet(list, "");        //设置给每个区块的颜色        dataset.setColors(new int[]{Color.rgb(216, 77, 719), Color.rgb(183, 56, 63), Color.rgb(247, 85, 47), Color.rgb(74, 99, 719)});        PieData data = new PieData(title, dataset);        //设置value的字体大小        data.setValueTextSize(14);        //设置数据源        pieChart.setData(data);        //设置描述信息        pieChart.setDescription("");        //设置左下方描述是否可见        pieChart.getLegend().setEnabled(false);        //设置View是否可以旋转        pieChart.setRotationEnabled(true);

ok,先看看效果图

Android统计表格MPAndroidChart解析_第5张图片

这里设置了一个条目事件,就是点击条目时条目自动旋转到最下方中心位置

//给View设置条目的点击事件        pieChart.setOnChartValueSelectedListener(this);

 /**     * 条目往外突出来的回调事件     *     * @param e     * @param dataSetIndex     * @param h     */    @Override    public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {        Log.e("test", "dataSetIndex:" + dataSetIndex + "      " + "h" + "         |||||||||||||        " + e);        pieChart.setRotationAngle(getAngle(e));        pieChart.setCenterText((int) (e.getVal() / sum * 100) + "%");    }    /**     * 条目收回的回调事件     */    @Override    public void onNothingSelected() {    }    private float getAngle(Entry e) {        int index = e.getXIndex();        float angle = 0f;        float temp = 0f;        while (index >0) {                temp += list.get(index-1).getVal();                index--;        }        angle = 90f - temp / sum * 360f - e.getVal() / sum * 360f / 2;        Log.e("angel", angle + "");        return angle;    }

实际开发中根据需求设置数据源和点击响应事件

LineChart线形图

初始化组件,并设置数据样式及点击事件

lineChart= (LineChart) findViewById(R.id.lineChart);        // 是否在折线图上添加边框        lineChart.setDrawBorders(false);        // 如果没有数据的时候，会显示这个，类似listview的emtpyview        lineChart                .setNoDataTextDescription("如果传给MPAndroidChart的数据为空，那么你将看到这段文字@dialog");        // 是否绘制背景颜色。        // 如果mLineChart.setDrawGridBackground(false)，        // 那么mLineChart.setGridBackgroundColor(Color.CYAN)将失效;        lineChart.setDrawGridBackground(false);        lineChart.setGridBackgroundColor(Color.CYAN);        // 触摸        lineChart.setTouchEnabled(true);        // 拖拽        lineChart.setDragEnabled(true);        // 缩放        lineChart.setScaleEnabled(true);        lineChart.setPinchZoom(false);//         设置背景//        lineChart.setBackgroundColor();        lineChart.getLegend().setEnabled(false);        lineChart.setData(getLineData());        lineChart.setDescription("");        lineChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {            @Override            public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {                Toast.makeText(MainActivity.this,e.getVal()+"",Toast.LENGTH_SHORT).show();            }            @Override            public void onNothingSelected() {            }        });    }

添加数据以及设置相应的属性

 private LineData getLineData(){        List line=new ArrayList<>();        List line1=new ArrayList<>();        List x=new ArrayList<>();        for (int i=0;i<100;i++){            line.add(new Entry((float) (Math.random() *i+20),i));            line1.add(new Entry((float) (Math.random() *i+20),i));            x.add("x:"+i);        }        LineDataSet set=new LineDataSet(line,"");        // 设置mLineDataSet.setDrawHighlightIndicators(false)后，        // Highlight的十字交叉的纵横线将不会显示，        // 同时，mLineDataSet.setHighLightColor(Color.CYAN)失效。        set.setDrawHighlightIndicators(false);        // 按击后，十字交叉线的颜色//        set.setHighLightColor(Color.CYAN);        //设置线条的颜色        set.setColor(Color.rgb(183, 56, 63));        //设置点(小圆点的颜色)        set.setCircleColor(Color.rgb(247, 85, 47));               LineData data=new LineData(x,set);        return data;    }

ok,看看样式

Android统计表格MPAndroidChart解析_第6张图片

可能在开发中会涉及到一个图中可能会有多条线的情况

 private LineData getLineData(){        List line=new ArrayList<>();        List line1=new ArrayList<>();        List x=new ArrayList<>();        for (int i=0;i<100;i++){            line.add(new Entry((float) (Math.random() *i+20),i));            line1.add(new Entry((float) (Math.random() *i+20),i));            x.add("x:"+i);        }        LineDataSet set=new LineDataSet(line,"");        // 设置mLineDataSet.setDrawHighlightIndicators(false)后，        // Highlight的十字交叉的纵横线将不会显示，        // 同时，mLineDataSet.setHighLightColor(Color.CYAN)失效。        set.setDrawHighlightIndicators(false);        // 按击后，十字交叉线的颜色//        set.setHighLightColor(Color.CYAN);        //设置线条的颜色        set.setColor(Color.rgb(183, 56, 63));        //设置点(小圆点的颜色)        set.setCircleColor(Color.rgb(247, 85, 47));        LineDataSet set1=new LineDataSet(line1,"");        set1.setColor(Color.rgb(216, 77, 719));        LineData data=new LineData(x,set);        data.addDataSet(set1);        return data;    }

ok,上图

Android统计表格MPAndroidChart解析_第7张图片

代码中已经给方法属性添加注解了.就不再一一介绍了.

That's all!!!THX

更多相关文章

随机推荐