Android 图表 MPAndroidChart 的简单使用

MPAndroidChart 是一个适用于 Android 的强大，能够简单使用的图库。支持线性的，分散的，柱状的，饼状的，“烛台”式等样式图形，像温度走势图，股票视图等。

AndroidMPChart在github上的项目主页： https://github.com/PhilJay/MPAndroidChart

但也可以在在项目的 libs 目录下导入 AndroidMPChart 的 jar 包，MPAndroidChart发布的jar包页面在：https://github.com/PhilJay/MPAndroidChart/releases

下面只是抽取其中 LineChart 当中的简单示意，效果如下：



在导入 jar 包后，activity_main.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="com.android.linechart.MainActivity" >

<com.github.mikephil.charting.charts.LineChart
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>

MainActivity.java :

package com.android.linechart;

import java.util.ArrayList;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.Legend.LegendForm;
import com.github.mikephil.charting.components.Legend.LegendPosition;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.ValueFormatter;
import com.github.mikephil.charting.utils.ViewPortHandler;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;

public class MainActivity extends Activity {

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

LineChart chart = (LineChart) findViewById(R.id.chart);

// 选择7个数据点（沿x坐标轴）
LineData mLineData = makeLineData(7);
setChartStyle(chart, mLineData, Color.WHITE);
}

// 设置 chart 显示的样式（7个点）
private void setChartStyle(LineChart chart, LineData mLineData, int color) {

// 是否在折线图上添加边框
chart.setDrawBorders(false);

chart.setDescription("@antimage08");

// 没有数据时显示，类似于 ListView 的 EmptyView
chart.setNoDataTextDescription("如果传给MPAndroidChart的数据为空，那么你将看到这段文字。CrazyBoy");

// 是否绘制背景颜色。
// 如果mLineChart.setDrawGridBackground(false)，
// 那么mLineChart.setGridBackgroundColor(Color.BLUE)将失效;
chart.setDrawGridBackground(false);
chart.setGridBackgroundColor(Color.BLUE);

// 设置能否触摸
chart.setTouchEnabled(true);

// 设置能否拖动
chart.setDragEnabled(true);

// 设置能否缩放
chart.setScaleEnabled(true);

// 设置能否在屏幕上做多指手势
chart.setPinchZoom(true);

// 设置背景色
chart.setBackgroundColor(color);

// 设置 x, y轴上的数据
chart.setData(mLineData);

// 沿 x 轴运动 2000毫秒,也就是绘制完所有的数据所需要的时间
chart.animateX(2000);

// ==================== 以下是 LineChart 的设置 ====================

// 设置LineChart的标示，每一组的 y 的 value 值
Legend mLegend = chart.getLegend();

// 设置 LineChart 所显示的位置
mLegend.setPosition(LegendPosition.BELOW_CHART_CENTER);

// 设置显示的样式，此处为矩形，后文中 "测试数据的作者：antimage08" 前面的图标
mLegend.setForm(LegendForm.SQUARE);

// 设置字体大小 ，后文中 "测试数据的作者：antimage08" 前面的图标的大小
mLegend.setFormSize(15.0f);

// 设置颜色
mLegend.setTextColor(Color.RED);

}

/**
*  数据点
*/
private LineData makeLineData(int count) {

ArrayList<String> x = new ArrayList<String>();

// 添加 x 轴显示的数据
for (int i = 0; i < count; i++) {
x.add("x:" + i);
}

// 随机添加 y 轴显示的数据
ArrayList<Entry> y = new ArrayList<Entry>();
for (int i = 0; i < count; i++) {
float values = (float)(Math.random() * 100);
Entry entry = new Entry(values, i);
y.add(entry);
}

// y 轴的所有数据
LineDataSet mLineDataSet = new LineDataSet(y, "测试数据的作者：antimage08");

// ==================== 用 y 轴的集合来设置参数 ====================
// 线宽
mLineDataSet.setLineWidth(3.0f);

// 折线的颜色
mLineDataSet.setColor(Color.DKGRAY);

// 显示的圆形的大小
mLineDataSet.setCircleSize(5.0f);

// 圆球的颜色
mLineDataSet.setCircleColor(Color.GREEN);

// 设置mLineDataSet.setDrawHighlightIndicators(false)后，
// Highlight的十字交叉的纵横线将不会显示，
// 同时，mLineDataSet.setHighLightColor(Color.CYAN)失效。
mLineDataSet.setDrawHighlightIndicators(true);

// 点击后，十字交叉线的颜色
mLineDataSet.setHighLightColor(Color.CYAN);

// 设置这项上显示的数据点的字体大小
mLineDataSet.setValueTextSize(10.0f);

// mLineDataSet.setDrawCircleHole(true);

// 改变折线样式，用曲线。
// mLineDataSet.setDrawCubic(true);
// 默认是直线
// 曲线的平滑度，值越大越平滑。
// mLineDataSet.setCubicIntensity(0.2f);

// 填充曲线下方的区域，红色，半透明。
// mLineDataSet.setDrawFilled(true);
// mLineDataSet.setFillAlpha(128);
// mLineDataSet.setFillColor(Color.RED);

// 填充折线上数据点、圆球里面包裹的中心空白处的颜色。
mLineDataSet.setCircleColorHole(Color.YELLOW);

// 设置折线上显示数据的格式。如果不设置，将默认显示float数据格式。
mLineDataSet.setValueFormatter(new ValueFormatter() {

@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {

int num = (int)value;
return "y:" + num;
}
});

LineData mLineData = new LineData(x, mLineDataSet);
return mLineData;
}

}

如果想要让折线变成曲线，且具有填充效果，可取消下面的这段注释：

// 改变折线样式，用曲线。
// mLineDataSet.setDrawCubic(true);
// 默认是直线
// 曲线的平滑度，值越大越平滑。
// mLineDataSet.setCubicIntensity(0.2f);

// 填充曲线下方的区域，红色，半透明。
// mLineDataSet.setDrawFilled(true);
// mLineDataSet.setFillAlpha(128);
// mLineDataSet.setFillColor(Color.RED);

取消的效果如下：