您的位置：首页 > 移动开发 > Android开发

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

2017-05-10 15:12 381 查看

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布局

[java]
view plain
copy

<?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="mat
15942
ch_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>

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

[java]
view plain
copy

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);
 }
}

布局

[java]
view plain
copy

<?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>

源码演示：

[java]
view plain
copy

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);
 }
}


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

1.初始化

2.添加数据x，y轴数据

3.出现动画和刷新图表

二、源码演示：BarChart 折线图

布局：

[java]
view plain
copy

<?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>

示例：

[java]
view plain
copy

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;
 }
}


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

1.初始化

2.添加数据x，y轴数据

3.出现动画和刷新图表

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

三、源码演示：PieChart 扇形图

布局：

[java]
view plain
copy

<?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>

示例：

[java]
view plain
copy

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;
 }
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航