Android图表超简单实现柱状图、折线图、饼状图(基于MpAndroidChart)

时间:2021-05-31 06:18:08

本文基于MpAndroidChart实现各种图标,目的是让同学们快速实现图标效果
实现效果:
柱状图
Android图表超简单实现柱状图、折线图、饼状图(基于MpAndroidChart)
折线图
Android图表超简单实现柱状图、折线图、饼状图(基于MpAndroidChart)
饼状图
Android图表超简单实现柱状图、折线图、饼状图(基于MpAndroidChart)

实现步骤:
1.导入
先从git上克隆下来,下载之后将jar包考到自己的工程
git地址
我用的是mpandroidchartlibrary-2-2-2.jar
2.柱状图实现
柱状图实现核心类:BarChart(用于显示柱状图)、BarData (用于设置数据和样式)

xml文件

<?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/bar_chart"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.github.mikephil.charting.charts.BarChart>

</LinearLayout>

Activity文件


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.interfaces.datasets.IBarDataSet;
import com.github.mikephil.charting.listener.OnChartValueSelectedListener;
import com.github.mikephil.charting.utils.ColorTemplate;

import java.util.ArrayList;

public class ZhuzhuangtuActivity extends AppCompatActivity {
//显示的图表
public BarChart barChart;
//保存数据的实体(下面定义了两组数据集合)
public ArrayList<BarEntry> entries = new ArrayList<BarEntry>();
public ArrayList<BarEntry> entries1 = new ArrayList<>();
//数据的集合(每组数据都需要一个数据集合存放数据实体和该组的样式)
public BarDataSet dataset;
public BarDataSet dataset1;
//表格下方的文字
public ArrayList<String> labels = new ArrayList<String>();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_zhuzhuangtu);
barChart = (BarChart) findViewById(R.id.bar_chart);
entries.add(new BarEntry(4f, 0));
entries.add(new BarEntry(8f, 1));
entries.add(new BarEntry(6f, 2));
entries.add(new BarEntry(12f, 3));
entries.add(new BarEntry(18f, 4));
entries.add(new BarEntry(9f, 5));


entries1.add(new BarEntry(4f, 0));
entries1.add(new BarEntry(8f, 1));
entries1.add(new BarEntry(6f, 2));
//设置数据组的数据
dataSet1 = new BarDataSet(entries1, "第二组数据");
//设置数据组的样式(参数是显示颜色的数组)
dataSet1.setColors(ColorTemplate.PASTEL_COLORS);
//设置柱状图上方显示数据字体大小
dataSet1.setValueTextSize(14);

labels.add("一月");
labels.add("二月");
labels.add("三月");
labels.add("四月");
labels.add("五月");
labels.add("六月");
dataset = new BarDataSet(entries, "第一组数据");
dataset.setColors(ColorTemplate.COLORFUL_COLORS);
ArrayList<IBarDataSet> dataSets = new ArrayList<>();
dataSets.add(dataset);
dataSets.add(dataSet1);
BarData data = new BarData(labels, dataSets);
barChart.setData(data);



//设置单个点击事件
barChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
@Override
public void onValueSelected(Entry entry, int i, Highlight highlight) {
Toast.makeText(getApplicationContext(),entry.getVal()+"",Toast.LENGTH_LONG).show();
}

@Override
public void onNothingSelected() {

}
});
//设置显示动画效果
barChart.animateY(2000);
//设置图标右下放显示文字
barChart.setDescription("MPandroidChart Test");

}
}

3.折线图实现
xml文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
>
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/spread_line_chart"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
/>
</RelativeLayout>

Activity文件

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 java.util.ArrayList;

public class ZhexiantuActivity extends AppCompatActivity {

public LineChart lineChart;
public ArrayList<String> x = new ArrayList<String>();
public ArrayList<Entry> y = new ArrayList<Entry>();
public ArrayList<LineDataSet> lineDataSets = new ArrayList<LineDataSet>();
public LineData lineData = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_zhexiantu);
lineChart = (LineChart)findViewById(R.id.spread_line_chart);
getLineData(100, 100);
showChart();
}
/**
* 初始化数据
* count 表示坐标点个数,range表示等下y值生成的范围
*/

public LineData getLineData(int count, float range) {
for (int i = 0; i < count; i++) { //X轴显示的数据
x.add(i + "");
}
for (int i = 0; i < count; i++) {//y轴的数据
float result = (float) (Math.random() * range) + 3;
y.add(new Entry(result, i));
}
LineDataSet lineDataSet = new LineDataSet(y, "随机产生的折线图");//y轴数据集合
lineDataSet.setLineWidth(1f);//线宽
lineDataSet.setCircleSize(Color.BLUE);//圆形颜色
lineDataSet.setCircleSize(2f);//现实圆形大小
lineDataSet.setColor(Color.RED);//现实颜色
lineDataSet.setHighLightColor(Color.BLACK);//高度线的颜色
lineDataSets.add(lineDataSet);
lineData = new LineData(x,lineDataSet);
return lineData;
}
/**
* 设置样式
*/

public void showChart() {
lineChart.setDrawBorders(false);//是否添加边框
lineChart.setDescription("随机生成的数据");//数据描述
lineChart.setNoDataTextDescription("我需要数据");//没数据显示
lineChart.setDrawGridBackground(true);//是否显示表格颜色
lineChart.setBackgroundColor(Color.GRAY);//背景颜色
lineChart.setData(lineData);//设置数据
Legend legend = lineChart.getLegend();//设置比例图片标示,就是那一组Y的value
legend.setForm(Legend.LegendForm.SQUARE);//样式
legend.setFormSize(10f);//字体
legend.setTextColor(Color.BLUE);//设置颜色
lineChart.animateX(2000);//X轴的动画
}
}

4.饼状图实现
xml文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
>

<com.github.mikephil.charting.charts.PieChart
android:id="@+id/pie_chart"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
/>

</RelativeLayout>

Activity文件

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;

public class BingzhuangtuActivity extends AppCompatActivity {
public PieChart mChart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bingzhuangtu);
mChart = (PieChart) findViewById(R.id.pie_chart);

PieData mPieData = getPieData(4, 100);
showChart(mChart, mPieData);
}


private void showChart(PieChart pieChart, PieData pieData) {
pieChart.setHoleColor(Color.TRANSPARENT);
pieChart.setHoleRadius(60f); //半径
pieChart.setTransparentCircleRadius(64f); // 半透明圈
//pieChart.setHoleRadius(0) //实心圆
pieChart.setDescription("测试饼状图");
// mChart.setDrawYValues(true);
pieChart.setDrawCenterText(true); //饼状图中间可以添加文字
pieChart.setDrawHoleEnabled(true);
pieChart.setRotationAngle(90); // 初始旋转角度
pieChart.setCenterTextSize(20);
pieChart.setDescriptionTextSize(20);
// draws the corresponding description value into the slice
// mChart.setDrawXValues(true);
// enable rotation of the chart by touch
pieChart.setRotationEnabled(true); // 可以手动旋转
// display percentage values
pieChart.setUsePercentValues(true); //显示成百分比
// mChart.setUnit(" €");
// mChart.setDrawUnitsInChart(true);
// add a selection listener
// mChart.setOnChartValueSelectedListener(this);
// mChart.setTouchEnabled(false);
// mChart.setOnAnimationListener(this);
pieChart.setCenterText("Quarterly Revenue"); //饼状图中间的文字
// pieChart.animateY(3000);
//设置数据
pieChart.setData(pieData);
// undo all highlights
// pieChart.highlightValues(null);
// pieChart.invalidate();
Legend mLegend = pieChart.getLegend(); //设置比例图

mLegend.setPosition(Legend.LegendPosition.RIGHT_OF_CHART); //最右边显示
// mLegend.setForm(LegendForm.LINE); //设置比例图的形状,默认是方形
mLegend.setXEntrySpace(7f);//设置距离饼图的距离,防止与饼图重合
mLegend.setYEntrySpace(5f);


pieChart.animateXY(1000, 1000); //设置动画
// mChart.spin(2000, 0, 360);
}

/**
* @param count 分成几部分
* @param range
*/

private PieData getPieData(int count, float range) {
ArrayList<String> xValues = new ArrayList<String>(); //xVals用来表示每个饼块上的内容
for (int i = 0; i < count; i++) {
xValues.add("Quarterly" + (i + 1)); //饼块上显示成Quarterly1, Quarterly2, Quarterly3, Quarterly4
}
ArrayList<Entry> yValues = new ArrayList<Entry>(); //yVals用来表示封装每个饼块的实际数据
// 饼图数据
/**
* 将一个饼形图分成四部分, 四部分的数值比例为14:14:34:38
* 所以 14代表的百分比就是14%
*/

float quarterly1 = 14;
float quarterly2 = 14;
float quarterly3 = 34;
float quarterly4 = 38;

yValues.add(new Entry(quarterly1, 0));
yValues.add(new Entry(quarterly2, 1));
yValues.add(new Entry(quarterly3, 2));
yValues.add(new Entry(quarterly4, 3));

//y轴的集合
PieDataSet pieDataSet = new PieDataSet(yValues, "Quarterly 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));
pieDataSet.setColors(colors);
DisplayMetrics metrics = getResources().getDisplayMetrics();
float px = 5 * (metrics.densityDpi / 160f);
pieDataSet.setSelectionShift(px); // 选中态多出的长度
PieData pieData = new PieData(xValues, pieDataSet);
return pieData;
}
}