Android MPAndroidChart使用教程和源码分析(一)

原创 2016年08月30日 15:11:23

一.概述

    MPAndroidChart是一款基于Android的开源图表库,MPAndroidChart不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,应用起来非常灵活。MPAndroidChart同样拥有常用的图表类型:线型图、饼图、柱状图和散点图。

GitHub地址:

https://github.com/PhilJay/MPAndroidChart

二.实例讲解

下面先以PieChart为例讲解一下基本的属性和用法:

<com.github.mikephil.charting.charts.PieChart
        android:id="@+id/chart1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/seekBar1" />

使用上面的代码之后你将一个MPAndroidChart的PieChart加入到了你的UI的XML文件之中,然后你需要在Activity或者其他的现实界面的类中得到PieChart的实例。

mChart = (PieChart) findViewById(R.id.chart1);

通过上面这句代码,我们得到了一个PieChart的实例,接下来我们可以对PieChart进行操作,操作的内容包括添加数据,设置属性等。

 mChart.setUsePercentValues(true);//使用百分比显示
        mChart.setDescription("");//设置图图表的描述
        mChart.setExtraOffsets(5, 10, 5, 5);//设置图表上下左右的偏移,类似于外边距

        mChart.setDragDecelerationFrictionCoef(0.95f);

        tf = Typeface.createFromAsset(getAssets(), "OpenSans-Regular.ttf");

        mChart.setCenterTextTypeface(Typeface.createFromAsset(getAssets(), "OpenSans-Light.ttf"));//设置PieChart中间文字的字体
        mChart.setCenterText(generateCenterSpannableText());//设置PieChart中间文字的内容

        mChart.setDrawHoleEnabled(true);//是否要将PieChart设为一个圆环状
        mChart.setHoleColor(Color.WHITE);//设置PieChart中间圆的颜色

        mChart.setTransparentCircleColor(Color.WHITE);
        mChart.setTransparentCircleAlpha(110);

        mChart.setHoleRadius(58f);
        mChart.setTransparentCircleRadius(61f);//设置中间圆的半透明圆环

        mChart.setDrawCenterText(true);

        mChart.setRotationAngle(0);//设置图表初始化时第一块数据显示的位置
        // enable rotation of the chart by touch
        mChart.setRotationEnabled(true);
        mChart.setHighlightPerTapEnabled(true);

        // mChart.setUnit(" €");
        // mChart.setDrawUnitsInChart(true);

        // add a selection listener
        mChart.setOnChartValueSelectedListener(this);//为图表设置一个item点击监听
设置完属性之后,我们为图表设置好图表所要显示的数据。

private void setData(int count, float range) {

        float mult = range;

        ArrayList<Entry> yVals1 = new ArrayList<Entry>();

        // IMPORTANT: In a PieChart, no values (Entry) should have the same
        // xIndex (even if from different DataSets), since no values can be
        // drawn above each other.
        for (int i = 0; i < count + 1; i++) {
            yVals1.add(new Entry((float) (Math.random() * mult) + mult / 5, i));
        }//为图表的Y轴上添加数据
        ArrayList<String> xVals = new ArrayList<String>();

        for (int i = 0; i < count + 1; i++)
            xVals.add(mParties[i % mParties.length]);//为图表的X轴上添加数据
        PieDataSet dataSet = new PieDataSet(yVals1, "Election Results");//将Y轴数据包装到一个PieDataSet中
        dataSet.setSliceSpace(3f);//设置不同DataSet之间的间距
        dataSet.setSelectionShift(5f);//设置Item被选中时变化的距离

        // add a lot of colors

        ArrayList<Integer> colors = new ArrayList<Integer>();

        for (int c : ColorTemplate.VORDIPLOM_COLORS)
            colors.add(c);

        for (int c : ColorTemplate.JOYFUL_COLORS)
            colors.add(c);

        for (int c : ColorTemplate.COLORFUL_COLORS)
            colors.add(c);

        for (int c : ColorTemplate.LIBERTY_COLORS)
            colors.add(c);

        for (int c : ColorTemplate.PASTEL_COLORS)
            colors.add(c);

        colors.add(ColorTemplate.getHoloBlue());

        dataSet.setColors(colors);//为DataSet中的数据匹配上颜色
        //dataSet.setSelectionShift(0f);

        PieData data = new PieData(xVals, dataSet);
        data.setValueFormatter(new PercentFormatter());//为Item上的数据添加一个Formatter
        data.setValueTextSize(11f);
        data.setValueTextColor(Color.WHITE);
        data.setValueTypeface(tf);
        mChart.setData(data);

        // undo all highlights
        mChart.highlightValues(null);

        mChart.invalidate();//将图表重绘以显示设置的属性和数据
    }
示例图片如下:

这是PieChart的使用实例,其实我们是不需要在教程里去讲解所有的图表类型的使用方法的,因为只不过是一些API去做的事情,我们多去做几次使用,结合着自己的程序更能速度的了解各种API的作用,在这里讲解一些API的使用只是为了引入MPAndroidChart的使用,我们讲解一个东西,首先要明白这个东西长什么样子,怎么变化不是嘛。

三.仅仅通过代码去分析一下图表类中的组成部分

经过分析,我觉得图表类中会有这么几个基本的组成类型:渲染器,画图区域,图表数据,监听器,动画,图例,坐标轴

好了,下面有一段代码:

 Legend l = mChart.getLegend();
        l.setPosition(LegendPosition.RIGHT_OF_CHART);
        l.setXEntrySpace(7f);
        l.setYEntrySpace(0f);
        l.setYOffset(0f);

一个Legend的实例对象l,这个对象很重要是图表的基本组成部分,字面意思是图例,而且根据代码我们可以大体的了解到Legend实例的几个API,有设置位置的,有设置间距的,有设置偏移的不是嘛,这个对象很重要,下一篇博文会讲解到。

然后呢,我们还有一段代码:

XAxis xAxis = mChart.getXAxis();
        xAxis.setPosition(XAxisPosition.BOTTOM);
        xAxis.setTypeface(mTf);
        xAxis.setDrawGridLines(false);
        xAxis.setSpaceBetweenLabels(2);


        YAxisValueFormatter custom = new MyYAxisValueFormatter();

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

        YAxis rightAxis = mChart.getAxisRight();
        rightAxis.setDrawGridLines(false);
        rightAxis.setTypeface(mTf);
        rightAxis.setLabelCount(8, false);
        rightAxis.setValueFormatter(custom);
        rightAxis.setSpaceTop(15f);
        rightAxis.setAxisMinValue(0f); // this replaces setStartAtZero(true)
在这里面我们很容易就能看出这段代码在做什么事情,我们得到了两个类型的实例对象,一个类型是XAxis,一个类型是YAxis,字面意思的X轴和Y轴,而且我们还设置了X轴和Y轴的一些属性,这个类型的对象很重要不是嘛,如果我们是来分析源码,我们就应该着重分析一下这个类型呀,在接下来的博文中会详细的讲解。

好了,我们现在列出了图表的两个重要的组成部分一个是图例,就是这个样子的东西:

这次你知道她的重要性了吧。
坐标轴的重要性,我不用去说了。
然后我们在看一下这么一段代码:
mChart.setOnChartValueSelectedListener(this);
        mChart.setOnChartGestureListener(
                new OnChartGestureListener() {
                    @Override
                    public void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
                    }

                    @Override
                    public void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
                       
                    }

                    @Override
                    public void onChartLongPressed(MotionEvent me) {

                    }

                    @Override
                    public void onChartDoubleTapped(MotionEvent me) {

                    }

                    @Override
                    public void onChartSingleTapped(MotionEvent me) {
                    }

                    @Override
                    public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY) {

                    }

                    @Override
                    public void onChartScale(MotionEvent me, float scaleX, float scaleY) {

                    }

                    @Override
                    public void onChartTranslate(MotionEvent me, float dX, float dY) {
                       
                    }
                });
上面这段代码是为我们的图表加上了监听器对吧,现在我们看到了两个类型的监听器一个是当Item被选中的时候的监听器,一个是监听手势的监听器。
然后我们在最后看一段代码:
private void setData(int count, float range) {
    
        ArrayList<String> xVals = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
             xVals.add(mMonths[i % 12]);
             }  
        ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
    
        for (int i = 0; i < count; i++) {
            float mult = (range + 1);
            float val = (float) (Math.random() * mult);
            yVals1.add(new BarEntry(val, i));
            }
    
        BarDataSet set1;

        if (mChart.getData() != null && mChart.getData().getDataSetCount() > 0) {
            set1 = (BarDataSet) mChart.getData().getDataSetByIndex(0);
            set1.setYVals(yVals1);
            mChart.getData().setXVals(xVals);
            mChart.getData().notifyDataChanged();
            mChart.notifyDataSetChanged();
        } else {
            set1 = new BarDataSet(yVals1, "DataSet");
            set1.setBarSpacePercent(35f);
            set1.setColors(ColorTemplate.MATERIAL_COLORS);

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

            BarData data = new BarData(xVals, dataSets);
            data.setValueTextSize(10f);
            data.setValueTypeface(mTf);
            mChart.setData(data);
        }
    }
看这段代码我们知道,这段代码是为图表添加数据而使用的对吧,在里面有BarEntry,BarDataSet和BarData三个类型的对象对吧,字面意思我们也能看出来,BarEntry是数据实体,BarDataSet是数据集合对吧,B a r D a ta理应就是这个图表的数据类,而且根据代码也应该知道BarEntry是BarDataSet的基本组成单位,BarDataSet是BarData的基本组成单位,这样的构成也是符合逻辑的,Entry对应某一个指定的数据,DataSet表示一组数据的组合,假设一个图表会有多组数据,那么Data就是这个数据的结构的顶层对吧,当然了大多数的Data只包含一个DataSet。
经过简单的代码分析和我们自己的逻辑思考(一个完整的图表到底有什么)还有就是我们的猜测(假设我们要自己去写一个Chart的lib,我们自己应该怎么去做),好了我门得到了图表的基本组成有渲染器,画图区域,图表数据,监听器,动画,图例,坐标轴这些,当然了经过源代码的查看我们知道:

在MPAndroidChart中的基本组成有:
(1)MAKERVIEW:点击Item时,弹出的数据信息。这个我们之前没有想到
(2)Legend:图例
(3)Axis:坐标轴
(4)Data:图表数据
(5)Listener:监听器主要有两个,一个是item点击的监听,一个是手势监听
(6)Animator:动画显示
(7)Renderer:渲染器,于渲染器相关的重要的组成部分有ViewPortHandler
(8)HighLighter:高亮,用来显示item被选中,这个在之前的分析中,并没有想到,还是代码功力不深啊
好了,我们现阶段的分析到此结束,下面的博客我们将以BarChart为例讲解所有的源代码实现。

下期博客再见。


MPAndroidChart 教程:概述

一、MPAndroidChart 是什么?MPAndroidChart 是 Android 一个强大且容易使用的图表库 支持线状图、柱状图、散点图、烛状图、气泡图、饼状图和蜘蛛网状图 支持缩放、拖动(...
  • u014136472
  • u014136472
  • 2015年12月12日 11:14
  • 33944

Android图表库MPAndroidChart(七)—饼状图可以再简单一点

Android图表库MPAndroidChart(七)—饼状图可以再简单一点 接上文,今天实现的是用的很多的,作用在统计上的饼状图,我们看下今天的效果 这个效果,我们实现,和之前一样的套路,我先...
  • qq_26787115
  • qq_26787115
  • 2016年11月18日 10:42
  • 9362

MpChart使用

下载MpChartLib package com.smarttrust.gupiao; import android.content.Intent; import android.graphi...
  • cy123cy456cy
  • cy123cy456cy
  • 2016年12月17日 11:08
  • 438

MPChartAndroid使用讲解

最的项目里又要加更加复杂的图表了,实在是不想在去自己实现了,就想找个第三方的开源图表库去实现,以前自己封装过achartenginee这个apache的图表引擎,但看到这个MPChartAndroid...
  • u014177843
  • u014177843
  • 2016年04月11日 17:52
  • 5444

MPAndroidChart—— pieChart 属性详解

MPAndroidChart GitHub 地址:https://github.com/PhilJay/MPAndroidChart pieChart 常用属性详解: // 设置 ...
  • zcmain
  • zcmain
  • 2016年12月13日 16:45
  • 5932

MPAndroidChart开源图表库(一)之饼状图

MPAndroidChart是一款基于Android的开源图表库,MPAndroidChart不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,应用起来非常灵活。MPA...
  • shineflowers
  • shineflowers
  • 2015年03月28日 15:32
  • 59141

MPChartLib绘制曲线图

关于android实现绘制曲线图或者折线图功能,有很多第三方架包,也可以自己画 ,不过不建议自己画,第一时间浪费掉了 ,第二性能还不一定好,既然有第三方的,为什么不直接使用第三方的呢? 刚开始我使...
  • StyleForYou
  • StyleForYou
  • 2015年09月28日 17:26
  • 3631

Android统计图的绘制( MPChartLib 的使用)

最近一直在研究Android 图形块的内容,绘制统计图肯定是要去学的;在自己写之前,首先要借鉴下别人写的;先学学别人的;我把对MPChartLib 的使用总结一下;先上效果图 统计图我们大可以从2点...
  • u010623068
  • u010623068
  • 2016年12月26日 17:20
  • 1979

Android MPAndroidChart之PieChart和数据结构以及模型【5】

Android MPAndroidChart之PieChart和数据结构以及模型【5】 以MPAndroidChart的饼状图PieChart为例。 测试的MainActivity的Jav...
  • zhangphil
  • zhangphil
  • 2015年12月04日 11:45
  • 5291

MPchart使用详解及详细属性(一)

MPchart使用详解及详细属性(一)
  • github_33304260
  • github_33304260
  • 2016年04月28日 10:06
  • 13872
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android MPAndroidChart使用教程和源码分析(一)
举报原因:
原因补充:

(最多只允许输入30个字)