最近在开发心率方面,要绘制心率图,准备自己写自定义view来实现,查找资料时发现了一款基于Android的开源图表库 -- MPAndroidChart 在github上 已经commits 1500次,经常在维护,想必功能还是很完善,bug很少的。

github地址: https://github.com/PhilJay/MPAndroidChart

可以通过导入库的方式来将该库引入自己的项目

也可以在这里 https://github.com/PhilJay/MPAndroidChart/releases 通过下载最新mpandroidchartlibrary-2-0-8.jar包, 然后copy到项目的libs中

MPAndroidChart主要功能特点:

支持x,y轴缩放

支持拖拽

支持手指滑动

支持高亮显示

支持保存图表到文件中

支持从文件(txt)中读取数据

预先定义颜色模板

自动生成标注

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

支持x,y轴动画

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

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

具体使用方法可以参考在下载的demo中的MPChartExample里

这里介绍一下主要api:

setDescription(String desc) //设置表格的描述

setDescriptionTypeface(Typeface t) //自定义表格中显示的字体

setDrawYValues(boolean enabled) // 设置是否显示y轴的值的数据

setValuePaintColor(int color) //设置表格中y轴的值的颜色,但是必须设置 setDrawYValues(true)

setValueTypeface(Typeface t)//设置字体

setValueFormatter(DecimalFormat format) // 设置显示的格式

setPaint(Paint p, int which) // 自定义笔刷

public ChartData getDataCurrent() //返回ChartData对象当前显示的图表。它包含了所有信息的显示值最小和最大值等

public float getYChartMin() // 返回当前最小值

public float getYChartMax() //返回当前最大值

public float getAverage() //返回所有值的平均值。

public float getAverage(int type) //返回平均值

public PointF getCenter() // 返回中间点

public Paint getPaint(int which) //得到笔刷

setTouchEnabled(boolean enabled) //设置是否可以触摸,如为false,则不能拖动,缩放等

setDragScaleEnabled(boolean enabled) //设置是否可以拖拽,缩放

setOnChartValueSelectedListener(OnChartValueSelectedListener l) //设置表格上的点,被点击的时候,的回调函数

setHighlightEnabled(boolean enabled) // 设置点击value的时候,是否高亮显示

public void highlightValues(Highlight[] highs) // 设置高亮显示

saveToGallery(String title) // 保存图表到图库中

saveToPath(String title, String pathOnSD) //保存.

setScaleMinima(float x, float y) // 设置最小的缩放

centerViewPort(int xIndex, float val)// 设置视口

fitScreen() // 适应屏幕

demo中的简单实例

public class RealtimeLineChartActivity extends DemoBase implements
OnChartValueSelectedListener {
private LineChart mChart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_realtime_linechart);
mChart = (LineChart) findViewById(R.id.chart1);
mChart.setOnChartValueSelectedListener(this);
// no description text
mChart.setDescription("");//设置图表描述信息
mChart.setNoDataTextDescription("You need to provide data for the chart.");
// enable touch gestures
mChart.setTouchEnabled(true); // 设置是否可以触摸
// enable scaling and dragging
mChart.setDragEnabled(true); // 是否可以拖拽
mChart.setScaleEnabled(true); // 是否可以缩放
mChart.setDrawGridBackground(false); //设置是否显示表格
// if disabled, scaling can be done on x- and y-axis separately
mChart.setPinchZoom(true);
// set an alternative background color
mChart.setBackgroundColor(Color.LTGRAY);
LineData data = new LineData();
data.setValueTextColor(Color.WHITE);
// add empty data
mChart.setData(data);
Typeface tf = Typeface.createFromAsset(getAssets(), "OpenSans-Regular.ttf");
// get the legend (only possible after setting data)
Legend l = mChart.getLegend(); // 设置比例图标示,就是那个一组y的value的
// modify the legend ...
// l.setPosition(LegendPosition.LEFT_OF_CHART);
l.setForm(LegendForm.LINE);
l.setTypeface(tf);
l.setTextColor(Color.WHITE);
XAxis xl = mChart.getXAxis();//设置是否显示表格
xl.setTypeface(tf);
xl.setTextColor(Color.WHITE);
xl.setDrawGridLines(false);//设置是否显示X轴表格
xl.setAvoidFirstLastClipping(true);//设置x轴起点和终点label不超出屏幕
xl.setSpaceBetweenLabels(5);// 设置x轴label间隔
xl.setEnabled(true);
//xl.setPosition(XAxisPosition.BOTTOM); //设置X轴的显示位置
YAxis leftAxis = mChart.getAxisLeft();//得到图表的左侧Y轴实例
leftAxis.setTypeface(tf);
leftAxis.setTextColor(Color.WHITE);
leftAxis.setAxisMaxValue(100f);// 设置Y轴最大值
leftAxis.setAxisMinValue(0f);// 设置Y轴最小值。
leftAxis.setDrawGridLines(true);
// leftAxis.enableGridDashedLine(10f, 10f, 0f); //设置横向表格为虚线
// limit lines are drawn behind data (and not on top)
// leftAxis.setDrawLimitLinesBehindData(true);
YAxis rightAxis = mChart.getAxisRight();//设置右侧Y轴不可用(这里可以向得到左侧Y轴那样,得到右侧Y轴实例去处理)
rightAxis.setEnabled(false);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.realtime, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.actionAdd: {
addEntry();
break;
}
case R.id.actionClear: {
mChart.clearValues();
Toast.makeText(this, "Chart cleared!", Toast.LENGTH_SHORT).show();
break;
}
case R.id.actionFeedMultiple: {
feedMultiple();
break;
}
}
return true;
}
private int year = 2015;
private void addEntry() {
LineData data = mChart.getData();
if (data != null) {
ILineDataSet set = data.getDataSetByIndex(0);
// set.addEntry(...); // can be called as well
if (set == null) {
set = createSet();
data.addDataSet(set);
}
// add a new x-value first
data.addXValue(mMonths[data.getXValCount() % 12] + " "
+ (year + data.getXValCount() / 12));
data.addEntry(new Entry((float) (Math.random() * 40) + 30f, set.getEntryCount()), 0);
// let the chart know it's data has changed
mChart.notifyDataSetChanged();
// limit the number of visible entries
mChart.setVisibleXRangeMaximum(120);
// mChart.setVisibleYRange(30, AxisDependency.LEFT);
// move to the latest entry
mChart.moveViewToX(data.getXValCount() - 121);
// this automatically refreshes the chart (calls invalidate())
// mChart.moveViewTo(data.getXValCount()-7, 55f,
// AxisDependency.LEFT);
}
}
private LineDataSet createSet() {
LineDataSet set = new LineDataSet(null, "Dynamic Data");
set.setAxisDependency(AxisDependency.LEFT);
set.setColor(ColorTemplate.getHoloBlue());
set.setCircleColor(Color.WHITE);
set.setLineWidth(2f);
set.setCircleRadius(4f);
set.setFillAlpha(65);
set.setFillColor(ColorTemplate.getHoloBlue());
set.setHighLightColor(Color.rgb(244, 117, 117));
set.setValueTextColor(Color.WHITE);
set.setValueTextSize(9f);
set.setDrawValues(false);
return set;
}
private void feedMultiple() {
new Thread(new Runnable() {
@Override
public void run() {
for (int i = 0; i < 500; i++) {
runOnUiThread(new Runnable() {
@Override
public void run() {
addEntry();
}
});
try {
Thread.sleep(35);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}).start();
}
@Override
public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
Log.i("Entry selected", e.toString());
}
@Override
public void onNothingSelected() {
Log.i("Nothing selected", "Nothing selected.");
}
}

下面是几张demo中运行的效果图:


android 报表平台 android 图表库_android 报表平台


android 报表平台 android 图表库_ide_02


android 报表平台 android 图表库_android 报表平台_03


android 报表平台 android 图表库_ide_04


android 报表平台 android 图表库_ide_05


android 报表平台 android 图表库_android 报表平台_06

自己的心率图:


android 报表平台 android 图表库_ide_07