MPAndroidChart开源图表《总》之折线图、统计图、扇形图

最新推荐文章于 2024-06-02 21:48:54 发布

置顶曾淘

最新推荐文章于 2024-06-02 21:48:54 发布

阅读量8.8k

点赞数 1

分类专栏： Android 开发之第三方框架 Android 精彩Demo演示文章标签： MPAndroidChart 图表统计图

本文链接：https://blog.csdn.net/u011546655/article/details/49149455

版权

Android 精彩Demo演示同时被 2 个专栏收录

14 篇文章 9 订阅

订阅专栏

Android 开发之第三方框架

5 篇文章 0 订阅

订阅专栏

MPAndroidChart简介

MPAndroidChart是一款基于Android的开源图表库，MPAndroidChart不仅可以在Android设备上绘制各种统计图表，而且可以对图表进行拖动和缩放操作，应用起来非常灵活。和前面介绍的AChartEngine相比，MPAndroidChart显得更为轻巧和简单，MPAndroidChart同样拥有常用的图表类型：线型图、饼图、柱状图和散点图。

效果图：有图有真相

我这里也用官方的先给你们看看吧，走一走套路式

LineChart 折线图

BarChart 条形图

PieChart 扇形图

真相，有图有真相

电脑有点卡，导致录制的动画很卡，你可以运行到手机上看看真正的效果

github地址：https://github.com/PhilJay/MPAndroidChart

1.从上面的地址中下载最新mpandroidchartlibrary-2-0-8.jar包，然后copy到项目的libs中，然后就可以开始实现了

一、源码演示：LineChart 折线图

1.xml布局

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/lineChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout></span>

2.当点击折线图的点的时候显示所需要的view和布局

<span style="font-size:14px;">package com.test.demo.demo.widget;

import android.content.Context;
import android.widget.TextView;

import com.github.mikephil.charting.components.MarkerView;
import com.github.mikephil.charting.data.CandleEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.utils.Utils;
import com.test.demo.demo.R;
import com.test.demo.demo.utils.UnitUtils;

/**
 * 作者：zengtao
 * 邮箱：1039562669@qq.com
 * 时间：2015/10/13 0013 19:08
 */
public class MyMarkView extends MarkerView {
    private TextView tvMarkText;

    public MyMarkView(Context context) {
        super(context, R.layout.mark_view);
        tvMarkText = (TextView) findViewById(R.id.tvMarkText);
    }

    @Override
    public void refreshContent(Entry entry, Highlight highlight) {
        if (entry instanceof CandleEntry) {
            CandleEntry ce = (CandleEntry) entry;
            tvMarkText.setText("" + Utils.formatNumber(ce.getHigh(), 0, true));
        } else {
            tvMarkText.setText("" + entry.getVal());
        }
    }

    @Override
    public int getXOffset() {
        return -(getWidth() / 2);
    }

    @Override
    public int getYOffset() {
        return -getHeight() - UnitUtils.dp2px(getContext(), 2);
    }
}</span>

布局

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvMarkText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/bg_marker"
        android:padding="10dp"
        android:textSize="18dp" />


</LinearLayout></span>

源码演示：

<span style="font-size:14px;">package com.test.demo.demo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.test.demo.demo.widget.MyMarkView;

import java.util.ArrayList;

import butterknife.ButterKnife;
import butterknife.InjectView;

/**
 * 作者：zengtao
 * 邮箱：1039562669@qq.com
 * 时间：2015/10/13 0013 20:01
 */
public class LineChartActivity extends AppCompatActivity {

    @InjectView(R.id.lineChart)
    LineChart mChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_line_chart);
        ButterKnife.inject(this);
        initChart();
    }

    /**
     * 1.初始化LineChart
     * 2.添加数据x，y轴数据
     * 3.刷新图表
     */
    private void initChart() {
        /**
         * ====================1.初始化-自由配置===========================
         */
        // 是否在折线图上添加边框
        mChart.setDrawGridBackground(false);
        mChart.setDrawBorders(false);
        // 设置右下角描述
        mChart.setDescription("");
        //设置透明度
        mChart.setAlpha(0.8f);
        //设置网格底下的那条线的颜色
        mChart.setBorderColor(Color.rgb(213, 216, 214));
        //设置高亮显示
        mChart.setHighlightEnabled(true);
        //设置是否可以触摸，如为false，则不能拖动，缩放等
        mChart.setTouchEnabled(true);
        //设置是否可以拖拽
        mChart.setDragEnabled(false);
        //设置是否可以缩放
        mChart.setScaleEnabled(false);
        //设置是否能扩大扩小
        mChart.setPinchZoom(false);
        /**
         * ====================2.布局点添加数据-自由布局===========================
         */
        // 折线图的点，点击战士的布局和数据
        MyMarkView mv = new MyMarkView(this);
        mChart.setMarkerView(mv);
        // 加载数据
        LineData data = getLineData();
        mChart.setData(data);
        /**
         * ====================3.x，y动画效果和刷新图表等===========================
         */
        //从X轴进入的动画
        mChart.animateX(4000);
        mChart.animateY(3000);   //从Y轴进入的动画
        mChart.animateXY(3000, 3000);    //从XY轴一起进入的动画
        //设置最小的缩放
        mChart.setScaleMinima(0.5f, 1f);
        Legend l = mChart.getLegend();
        l.setForm(Legend.LegendForm.LINE);  //设置图最下面显示的类型
        l.setTextSize(15);
        l.setTextColor(Color.rgb(104, 241, 175));
        l.setFormSize(30f);
        // 刷新图表
        mChart.invalidate();
    }

    private LineData getLineData() {
        String[] xx = {"2", "4", "6", "8", "10", "12", "14", "16", "18"};
        String[] yy = {"20", "80", "10", "60", "30", "70", "55", "22", "40"};

        ArrayList<String> xVals = new ArrayList<String>();
        for (int i = 0; i < xx.length; i++) {
            xVals.add(xx[i]);
        }

        ArrayList<Entry> yVals = new ArrayList<Entry>();
        for (int i = 0; i < yy.length; i++) {
            yVals.add(new Entry(Float.parseFloat(yy[i]), i));
        }

        LineDataSet set1 = new LineDataSet(yVals, "LineChart Test");
        set1.setDrawCubic(true);  //设置曲线为圆滑的线
        set1.setCubicIntensity(0.2f);
        set1.setDrawFilled(false);  //设置包括的范围区域填充颜色
        set1.setDrawCircles(true);  //设置有圆点
        set1.setLineWidth(2f);    //设置线的宽度
        set1.setCircleSize(5f);   //设置小圆的大小
        set1.setHighLightColor(Color.rgb(244, 117, 117));
        set1.setColor(Color.rgb(104, 241, 175));    //设置曲线的颜色

        return new LineData(xVals, set1);
    }
}
</span>

以上，就完成了一个折线图的打造，其实也就很简单，就三点

1.初始化
2.添加数据x，y轴数据
3.出现动画和刷新图表

二、源码演示：BarChart 折线图

布局：

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/barChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </com.github.mikephil.charting.charts.BarChart>

</LinearLayout></span>

示例：

<span style="font-size:14px;">package com.test.demo.demo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;

import java.util.ArrayList;

import butterknife.ButterKnife;
import butterknife.InjectView;

/**
 * 作者：zengtao
 * 邮箱：1039562669@qq.com
 * 时间：2015/10/14 0014 10:05
 */
public class BarChartActivity extends AppCompatActivity {
    @InjectView(R.id.barChart)
    BarChart barChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bar_chart);
        ButterKnife.inject(this);
        initBarChart();
    }

    private void initBarChart() {
        barChart.setDrawGridBackground(false);
        barChart.setDrawBorders(false);  //是否在折线图上添加边框
        barChart.setDescription("");// 数据描述
        barChart.setNoDataTextDescription("no data to display"); // 如果没有数据，显示
        barChart.setDrawGridBackground(false); // 是否显示表格颜色
        barChart.setGridBackgroundColor(Color.WHITE); // 表格的的颜色，在这里是是给颜色设置一个透明度

        barChart.setTouchEnabled(false); // 设置是否可以触摸
        barChart.setDragEnabled(false);// 是否可以拖拽
        barChart.setScaleEnabled(false);// 是否可以缩放
        barChart.setPinchZoom(false);//
        barChart.setDrawBarShadow(true);

        // 设置数据
        BarData mBarData = getBarData(4);
        barChart.setData(mBarData);

        Legend mLegend = barChart.getLegend(); // 设置比例图标示
        mLegend.setForm(Legend.LegendForm.CIRCLE);// 样式
        mLegend.setFormSize(6f);// 字体
        mLegend.setTextColor(Color.BLACK);// 颜色

        // X轴设定
        barChart.animateY(3000);
        barChart.invalidate();
    }

    private BarData getBarData(int count) {
        int[] yy = {60, 40, 80, 50};

        ArrayList<String> xValues = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            xValues.add(String.format("爱情公寓%s", (i + 1)));
        }

        ArrayList<BarEntry> yValues = new ArrayList<BarEntry>();
        for (int i = 0; i < count; i++) {
            yValues.add(new BarEntry(yy[i], i));
        }

        // y轴的数据集合
        BarDataSet barDataSet = new BarDataSet(yValues, "BarChart Test");
        barDataSet.setColor(Color.rgb(114, 188, 223));
        ArrayList<BarDataSet> barDataSets = new ArrayList<BarDataSet>();
        barDataSets.add(barDataSet); // add the datasets
        BarData barData = new BarData(xValues, barDataSets);
        return barData;
    }
}
</span>

看到这里，你就会发现，折线图和统计图，基本上都是一个样子：

1.初始化
2.添加数据x，y轴数据
3.出现动画和刷新图表

同样的操作，连初始化都是差不多，所以，你只需要懂一个的统计图，那么所有的就都懂了，多的不说，往下看

三、源码演示：PieChart 扇形图

布局：

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/pieChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
</LinearLayout></span>

示例：

<span style="font-size:14px;">package com.test.demo.demo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;

import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;

import java.util.ArrayList;

import butterknife.ButterKnife;
import butterknife.InjectView;

/**
 * 作者：zengtao
 * 邮箱：1039562669@qq.com
 * 时间：2015/10/14 0014 10:05
 */
public class PieChartActivity extends AppCompatActivity {
    @InjectView(R.id.pieChart)
    PieChart pieChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pie_chart);
        ButterKnife.inject(this);
        initPieChart();
    }

    private void initPieChart() {
        pieChart.setDescription("BarChart Test");
        pieChart.setHoleColorTransparent(true);
        pieChart.setHoleRadius(60f);  //半径
        pieChart.setTransparentCircleRadius(0f); // 半透明圈
        pieChart.setHoleRadius(0);  //实心圆

        pieChart.setDrawCenterText(true);  //饼状图中间可以添加文字
        pieChart.setDrawHoleEnabled(true);
        pieChart.setRotationAngle(90); // 初始旋转角度

        pieChart.setRotationEnabled(true); // 可以手动旋转
        pieChart.setUsePercentValues(true);  //显示成百分比
//        pieChart.setCenterText("PieChart");  //饼状图中间的文字

        //设置数据
        PieData pieData = getPieData(6);
        pieChart.setData(pieData);

        Legend mLegend = pieChart.getLegend();  //设置比例图
        mLegend.setPosition(Legend.LegendPosition.LEFT_OF_CHART_CENTER);  //最左边显示
        mLegend.setForm(Legend.LegendForm.SQUARE);  //设置比例图的形状，默认是方形 SQUARE
        mLegend.setXEntrySpace(7f);
        mLegend.setYEntrySpace(5f);

        pieChart.animateXY(1000, 1000);  //设置动画
        pieChart.invalidate();
    }

    private PieData getPieData(int count) {
        int[] yy = {12, 12, 18, 20, 28, 10};

        ArrayList<String> xValues = new ArrayList<String>();  //xVals用来表示每个饼块上的内容
        for (int i = 0; i < count; i++) {
            xValues.add("PieChart" + (i + 1));  //饼块上显示成PieChart1, PieChart2, PieChart3, PieChart4，PieChart5，PieChart6
        }

        /**
         * 将一个饼形图分成六部分， 各个部分的数值比例为12:12:18:20:28:10
         * 所以 12代表的百分比就是12%
         * 在具体的实现过程中，这里是获取网络请求的list的数据
         */
        ArrayList<Entry> yValues = new ArrayList<Entry>();  //yVals用来表示封装每个饼块的实际数据
        for (int i = 0; i < count; i++) {
            yValues.add(new Entry(yy[i], i));
        }

        //y轴的集合
        PieDataSet pieDataSet = new PieDataSet(yValues, "PieChart Revenue 2014");
        pieDataSet.setSliceSpace(0f); //设置个饼状图之间的距离

        // 饼图颜色
        ArrayList<Integer> colors = new ArrayList<Integer>();
        colors.add(Color.rgb(205, 205, 205));
        colors.add(Color.rgb(114, 188, 223));
        colors.add(Color.rgb(255, 123, 124));
        colors.add(Color.rgb(57, 135, 200));
        colors.add(Color.rgb(30, 20, 200));
        colors.add(Color.rgb(80, 60, 150));
        pieDataSet.setColors(colors);

        DisplayMetrics metrics = getResources().getDisplayMetrics();
        float px = 5 * (metrics.densityDpi / 160f);
        pieDataSet.setSelectionShift(px); // 选中态多出的长度
        PieData pieData = new PieData(xValues, pieDataSet);

        return pieData;
    }
}
</span>

至于，我为什么这过程中，没有讲解其他的，全部都是源码演示，那是因为，我在代码中，都已经详细的解释了，每一行代码是什么意思了，我相信，只要你看下来，那么绝对会懂的，不需要唧唧歪歪一大堆了，闲的很繁。

Demo地址：http://download.csdn.net/detail/u011546655/9182491

如果大家想要更详细的了解，可以去这里：https://github.com/PhilJay/MPAndroidChart

大家如有疑问，请留言，谢谢！

曾淘

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
9
评论
MPAndroidChart开源图表《总》之折线图、统计图、扇形图

MPAndroidChart简介 MPAndroidChart是一款基于Android的开源图表库，MPAndroidChart不仅可以在Android设备上绘制各种统计图表，而且可以对图表进行拖动和缩放操作，应用起来非常灵活。和前面介绍的AChartEngine相比，MPAndroidChart显得更为轻巧和简单，MPAndroidChart同样拥有常用的图表类型：线型图、饼图、柱状图
复制链接

扫一扫

专栏目录