非常实用的图表工具MPAndroidChart

最近做了两个数据展示的APP，都使用到了MPAndroidChart这个图表框架。

框架地址：https://github.com/PhilJay/MPAndroidChart

下面就来讲解一下MPChart的使用

MPAndoridChart

Chart types（目前支持的图表类别）

LineChart (with legend, simple design) (线性图1)



LineChart (with legend, simple design) (线性图2)



LineChart (cubic lines) (线性图3)



LineChart (gradient fill) (线性图4)



Combined-Chart (bar- and linechart in this case) (组合图 柱状图加线形图组合)



BarChart (with legend, simple design)(柱状图1)



BarChart (grouped DataSets) (柱状图2)



Horizontal-BarChart(横向柱状图)



PieChart (with selection, …) (饼状图)



ScatterChart (with squares, triangles, circles, … and more)(散点图)



CandleStickChart (for financial data) （烛形图）



BubbleChart (area covered by bubbles indicates the yValue)（气泡图）



RadarChart (spider web chart)(雷达图)

功能

支持x，y轴缩放

支持拖拽

支持手指滑动

支持高亮显示

支持保存图表到文件中

支持从文件（txt）中读取数据

预先定义颜色模板

自动生成标注

支持自定义x，y轴的显示标签

支持x，y轴动画

支持x，y轴设置最大值和附加信息

支持自定义字体，颜色，背景，手势，虚线等

实现

写sample的时候才发现，从1.0版本到3.0版本这个框架改动还是蛮多的。
主要是把雷达图和饼状图抽取共用了。为了实现复合图将X轴值的设置放到了Axais中。之前是直接放到ChartData中的。

图表常用的实现：
每个图表都必须实现填充ChartData，也就是XY轴的数据。
系统有默认的图表样式，可根据喜好设置图表的样式，各种颜色、形状、数据之间的间距等。
可以根据图表的绘制流程和图表的点击事件(点击某个数据的监听)设置监听。
可以添加图表的一些辅助显示工具：MarkView(以MarkView的形式显示数据，这种在数据量大的情况能避免数据显示重叠)，Legend(图表轴描述)

这边以LineChart为例

package cn.xiaolongonly.mpchartsample.ui;

import android.graphics.Color;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
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.IAxisValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;

import java.util.ArrayList;
import java.util.List;

import cn.xiaolongonly.mpchartsample.R;
import cn.xiaolongonly.mpchartsample.base.BaseActivity;
import cn.xiaolongonly.mpchartsample.chart.markview.DataMarkView;
import cn.xiaolongonly.mpchartsample.chart.util.ColorTemplate;

/**
* @author xiaolong
* @version v1.0
* @function <描述功能>
* @date 2016/12/6-9:10
*/
public class LineChartActivity1 extends BaseActivity {
private LineChart chart;

@Override
protected int getLayoutId() {
return R.layout.list_item_linechart;
}

@Override
protected void initView() {
chart = findView(R.id.chart);

ChartConfig();
//XY轴配置
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //定制X轴是在图表上方还是下方。
xAxis.setDrawGridLines(false);
xAxis.setGranularity(1);
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return (int) value + "年";
}
});
YAxis yAxisRight = chart.getAxisRight();
yAxisRight.setEnabled(false);
YAxis yAxisLeft = chart.getAxisLeft();
yAxisLeft.setAxisMinValue(0);
//动画效果
chart.animateX(750);
chart.animateY(750);
}

/**
* 图表的配置 一些提示和Legend
*/
private void ChartConfig() {

//设置覆盖物
DataMarkView dataMarkView = new DataMarkView(this, 0, "");//自定义覆盖物
chart.setMarkerView(dataMarkView);

//背景设置
chart.setDrawGridBackground(false);//表格背景绘制
chart.setBackgroundColor(getResources().getColor(R.color.chart_bg));

//Legend定制
chart.getLegend().setPosition(Legend.LegendPosition.ABOVE_CHART_LEFT);
chart.getLegend().setForm(Legend.LegendForm.CIRCLE);//Legend样式

//图表描述
chart.setDescription(null);
// 设置无数据文本提示
chart.setNoDataText(getResources().getString(R.string.chart_no_data));
//XY轴描述
chart.setXYDesc("年份", "总金额（元)");
//设置单方向和双方向缩放 true x,y方向可以同时控制，false只能控制x方向的缩小放大或者Y方向的缩小放大
chart.setPinchZoom(true);
//填充数据
chart.setData(new LineData(generateLineDataSet()));
}

@Override
protected void setListener() {

}

private ILineDataSet generateLineDataSet() {
int color = ColorTemplate.PIE_COLORS[0];
LineDataSet dataSet = new LineDataSet(generateData(), "年度营业额曲线");
dataSet.setLineWidth(2.0f);
dataSet.setCircleRadius(3.5f);
dataSet.setDrawCircleHole(true);//填充圆
dataSet.setValueTextSize(9f);
dataSet.setHighlightLineWidth(2.0f);
dataSet.setDrawFilled(true);//区域颜色
dataSet.setFillAlpha(51);
dataSet.setFillColor(color); //填充色
dataSet.setHighLightColor(color); //选中十字线色
dataSet.setColor(color); //线条颜色
dataSet.setCircleColor(color); //圆点颜色
dataSet.setCircleColorHole(Color.WHITE);
dataSet.setCircleHoleRadius(2.0f);
dataSet.setDrawValues(false);
return dataSet;
}

private List<Entry> generateData() {
List<Entry> entryList = new ArrayList<>();
entryList.add(new Entry(2013, 1000));
entryList.add(new Entry(2014, 2000));
entryList.add(new Entry(2015, 3000));
entryList.add(new Entry(2016, 4000));
return entryList;
}
}

效果如下

简单的介绍了一下MPChart的实现，一般就两个流程：
一是设置图表配置（Legend,X，Y轴样式，图表样式，markView添加，动画效果等，注：不设置的话会使用默认的配置）
二是填充数据（将需要展示的数据绑定到图表框架中）。
图表框架有写地方并不能满足我们的需求，比如说没有XY轴描述。
国内的人大部分看图表的习惯就只需要显示单条X，Y轴，并在轴末端设置单位等。
下一篇文章介绍 自定义需求，XY轴描述添加。

参考自：http://blog.csdn.net/u013338165/article/details/44810025