MPAndroidChart开源图表《总》之折线图、统计图、扇形图
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 * 邮箱：[email protected] * 时间：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 * 邮箱：[email protected] * 时间：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.出现动画和刷新图表
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 * 邮箱：[email protected] * 时间：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.出现动画和刷新图表
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 * 邮箱：[email protected] * 时间：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
大家如有疑问，请留言，谢谢！