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 一个强大且容易使用的图表库 支持线状图、柱状图、散点图、烛状图、气泡图、饼状图和蜘蛛网状图 支持缩放、拖动(...

MPAndroidChart入门

因为最近的项目中有多个地方使用到图表,而之前没有使用过,所以在网上找相关的图表开源库,有两个是最流行的;一个是MPAndroidChart,另一个是hello-chart,最后经过考虑决定使用前者,所...

MPAndroidchart 教程:图例 Legend(七)

默认情况下,所有的图表类型都支持 Legend 且在设置图表数据后会自动生成 Legend 。 Legend 通常由一个标签的 形式/形状 来表示多个条目( entries ) 的每一个。entri...

MPAndroidChart的属性和方法

一、图表属性 1、刷新    invalidate():在chart中调用会使其刷新重绘    notifyDataChanged():让chart知道它依赖的基础数据已经改变,并执行所有必要的...
  • koma025
  • koma025
  • 2016年12月26日 15:56
  • 2132

Android的图表世界–如何使用MPAndroidChart

Android的图表世界–如何使用MPAndroidChart 应用中常常需要展现一部分数据给用户,选择通过带有动画的统计图来替代简单的表格式布局往往会给用户带来不错的体验,这篇教程主要讲解如何使...

MPAndroidChart 教程:动画 Animations(十)

效果图1) LineChart // 设置动画 chart.animateX(8000); // 图1 chart.animateY(8000); // 图2 c...

MPAndroidChart开源图表库(二)之折线图

承接上一篇文章,请参考 http://blog.csdn.net/shineflowers/article/details/44701645 1. 将mpandroidchartlibrary-2-0...

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

一.概述     MPAndroidChart是一款基于Android的开源图表库,MPAndroidChart不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,应用...

MPAndroidChart 教程:MarkerView(十一)

一、什么是MarkerView效果图: 如上图所示,当点击折线图上的点时,会弹出一个View,这就是 Markerview 。 上面的左图是一个 TextView 布局和一个椭圆黑色的 backg...

MPAndroidChart 教程:坐标轴,X轴,Y轴,Labels(三)

一、坐标轴1.Document在文档中,AxisBase是XAxis和YAxis的父类 AxisBase Baseclass of all labels. XAxis Class represen...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android MPAndroidChart使用教程和源码分析(一)
举报原因:
原因补充:

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