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

最新推荐文章于 2023-02-11 01:03:40 发布

剑舞乄天下

最新推荐文章于 2023-02-11 01:03:40 发布

阅读量714

点赞数

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="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>

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