开源图表库MPAndroidChart之饼状图和柱状图

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

MPAndroidChartGitHub地址

各个版本mpandroidchartlibrary.jar包下载

1、导入 mpandroidchartlibrary-2-0-8.jar

2、定义XML文件

activity_main.xml

<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity" >

<com.github.mikephil.charting.charts.PieChart
android:id="@+id/spread_pie_chart"
android:layout_width="wrap_content"
android:layout_height="320dp"
android:layout_gravity="center_horizontal"
/>
<Button
android:id="@+id/bt_to_bar_chart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToBarChart"
android:layout_gravity="center_horizontal" />
</LinearLayout>

activity_main2.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"
tools:context=".Main2Activity" >

<com.github.mikephil.charting.charts.BarChart
android:id="@+id/spread_bar_chart"
android:layout_width="wrap_content"
android:layout_height="320dp"
android:layout_gravity="center_horizontal" />
</RelativeLayout>

3.主要Java逻辑代码如下

饼状图

MainActivity.java

import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.Legend.LegendPosition;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;
import com.github.mikephil.charting.utils.PercentFormatter;

public class MainActivity extends Activity {

private PieChart mChart;

private Button toBarChart;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toBarChart = (Button) findViewById(R.id.bt_to_bar_chart);
toBarChart.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this,Main2Activity.class);
startActivity(intent);
}
});
mChart = (PieChart) findViewById(R.id.spread_pie_chart);

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

private void showChart(PieChart pieChart, PieData pieData) {
pieChart.setHoleColorTransparent(true);

//pieChart.setHoleRadius(40f); // 半径
pieChart.setTransparentCircleRadius(0f); // 半透明圈
pieChart.setHoleRadius(0); //实心圆

pieChart.setDescription("测试饼状图");

// mChart.setDrawYValues(true);
pieChart.setDrawCenterText(false); // 饼状图中间可以添加文字

pieChart.setDrawHoleEnabled(true);

pieChart.setRotationAngle(90); // 初始旋转角度

// draws the corresponding description value into the slice
// mChart.setDrawXValues(true);

// enable rotation of the chart by touch
pieChart.setRotationEnabled(false); // 可以手动旋转

// 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.setData(pieData);

// undo all highlights
// pieChart.highlightValues(null);
// pieChart.invalidate();

Legend mLegend = pieChart.getLegend(); // 设置比例图
mLegend.setPosition(LegendPosition.RIGHT_OF_CHART_CENTER); // 最右边显示
// 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 = 100;
float quarterly2 = 20;
float quarterly3 = 66;
float quarterly4 = 98;

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,
""/* 显示在比例图上 */);
pieDataSet.setSliceSpace(2f); // 设置个饼状图之间的距离

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);
pieDataSet.setColors(ColorTemplate.VORDIPLOM_COLORS);
DisplayMetrics metrics = getResources().getDisplayMetrics();
float px = 5 * (metrics.densityDpi / 160f);
pieDataSet.setSelectionShift(px); // 选中态多出的长度

PieData pieData = new PieData(xValues, pieDataSet);
pieData.setValueFormatter(new PercentFormatter());//显示百分比
pieData.setValueTextSize(10f);//饼状图上字体大小
return pieData;
}

}

柱状图

Main2Activity.java

import java.util.ArrayList;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.components.Legend.LegendForm;
import com.github.mikephil.charting.components.Legend.LegendPosition;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.XAxis.XAxisPosition;
import com.github.mikephil.charting.components.YAxis.YAxisLabelPosition;
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.utils.ColorTemplate;
import com.github.mikephil.charting.utils.ValueFormatter;

public class Main2Activity extends Activity {

private BarChart mBarChart;
private BarData mBarData;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);

mBarChart = (BarChart) findViewById(R.id.spread_bar_chart);
mBarData = getBarData(4, 100);
showBarChart(mBarChart, mBarData);
}

private void showBarChart(BarChart barChart, BarData barData) {
barChart.setDrawBorders(false); // //是否添加边框

barChart.setDescription("");// 数据描述

// 如果没有数据的时候，会显示这个，类似ListView的EmptyView
barChart.setNoDataTextDescription("You need to provide data for the chart.");

barChart.setDrawGridBackground(false); // 是否显示表格颜色
barChart.setGridBackgroundColor(Color.WHITE & 0x70FFFFFF); // 表格的的颜色，在这里是是给颜色设置一个透明度

barChart.setTouchEnabled(true); // 设置是否可以触摸

barChart.setDragEnabled(false);// 是否可以拖拽
barChart.setScaleEnabled(false);// 是否可以缩放

barChart.setPinchZoom(false);//

// barChart.setBackgroundColor();// 设置背景

barChart.setDrawBarShadow(false);

barChart.setData(barData); // 设置数据

Legend mLegend = barChart.getLegend(); // 设置比例图标示

mLegend.setForm(LegendForm.CIRCLE);// 样式
mLegend.setFormSize(6f);// 字体
mLegend.setTextColor(Color.BLACK);// 颜色
mLegend.setPosition(LegendPosition.BELOW_CHART_CENTER);
// X轴设定
XAxis xAxis = barChart.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);
YAxis leftAxis = barChart.getAxisLeft();
// leftAxis.setTypeface(mTf);
//   leftAxis.setLabelCount(8);
//   leftAxis.setValueFormatter(custom);
leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);

YAxis rightAxis = barChart.getAxisRight();
rightAxis.setDrawGridLines(false);
// rightAxis.setTypeface(mTf);
// rightAxis.setLabelCount(8);
// rightAxis.setValueFormatter(custom);
rightAxis.setEnabled(false);//设置不可见
barChart.animateX(2500); // 立即执行的动画,x轴
}

private BarData getBarData(int count, float range) {
ArrayList<String> xValues = new ArrayList<String>();
for (int i = 0; i < count; i++) {
xValues.add("第" + (i + 1) + "季度");
}

ArrayList<BarEntry> yValues = new ArrayList<BarEntry>();

for (int i = 0; i < count; i++) {
float value = (float) (Math.random() * range/* 100以内的随机数 */) + 3;
yValues.add(new BarEntry(value, i));
}

// y轴的数据集合
BarDataSet barDataSet = new BarDataSet(yValues, "测试饼状图");
// 单色
// barDataSet.setColor(Color.rgb(114, 188, 223));
// 多色

barDataSet.setColors(ColorTemplate.VORDIPLOM_COLORS);
ArrayList<BarDataSet> barDataSets = new ArrayList<BarDataSet>();
barDataSets.add(barDataSet);

// add the datasets

BarData barData = new BarData(xValues, barDataSets);
// barData.setValueTypeface(mTf);

return barData;
}
}

4.效果图





5.存在问题

如下图：



如果有哪位大神知道解决方案，请告知，不甚感谢。