最近在开发心率方面,要绘制心率图,准备自己写自定义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中运行的效果图:

e2bd7f8fc8dcd842c3ec81026b7a4aeb.png

b9076b49b7c4ad814c2e5c2812205acd.png

d05379daa66e434e339ddd75b89abd12.png

43847ef275dcd0356dd4eeb3c1eb31db.png

3cc1cf30f6312f2acf4b06ad1b2f2c9e.png

3088ccead76ff9fdb41c1174e701e2b9.png

自己的心率图:

3d1e757cd1f2b6243506c4ceb1f49b55.png

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐