android开源图表库MPAndroidChart

最近一个项目需要用到表格进行统计显示,本来用的是的achartengine,后来发现一个更加强大的开源框架MPAndroidChart。

下面简单介绍下MPAndroidChart,MPAndroidChart的效果还是蛮好的,提供各种动画,这个也是我使用MPAndroidChart,而且放弃achartengine的原因。

Github地址连接,后面是youtube上面演示MPAndroidChart的视频,MPAndroidChart由于提供了动画效果,为了兼容低版本的Android系统,MPAndroidChart需要添加nineoldandroids-2.4.0-2.jar作为依赖库,所以如果项目中使用这个表格库,需要同时导入这个两个jar,当然如果使用libproject的方式,就不用了。

https://github.com/PhilJay/MPAndroidChart

https://www.youtube.com/watch?v=ufaK_Hd6BpI

http://nineoldandroids.com/




支持功能

核心功能:

  • 支持x,y轴缩放
  • 支持拖拽
  • 支持手指滑动
  • 支持高亮显示
  • 支持保存图表到文件中
  • 支持从文件(txt)中读取数据
  • 预先定义颜色模板
  • 自动生成标注
  • 支持自定义x,y轴的显示标签
  • 支持x,y轴动画
  • 支持x,y轴设置最大值和附加信息
  • 支持自定义字体,颜色,背景,手势,虚线等

显示的图表类型:

  • LineChart (with legend, simple design) (线性图)
  •  alt tag
  • LineChart (with legend, simple design)(线性图)

  •  alt tag

  • LineChart (cubic lines)(线性图)

  •  alt tag

  • LineChart (single DataSet) (线性图)

  • alt tag

  • BarChart2D (with legend, simple design)(柱状图)

alt tag

  • BarChart2D (grouped DataSets)(柱状图)

alt tag

  • BarChart2D

alt tag

  • PieChart (with selection, ...)(饼状图)

alt tag

  • ScatterChart (with squares, triangles, circles, ... and more)(散列图)

alt tag

  • CandleStickChart (for financial data)

alt tag

  • RadarChart (spider web chart)(螂蛛网图)

alt tag

使用方法

1、直接使用jar方式,需要导入mpchartlib.jar,nineoldandroidsjar。

2、使用libproject的方式,作为项目依赖。

步骤:

如果使用 LineChart, BarChart, ScatterChart, CandleStickChart or PieChart , 可以直接在xml中定义。

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

或则直接在代码中声明和实例化。

    LineChart chart = new LineChart(Context);

主要的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(): 适应屏幕

动画:

所有的图表类型都支持下面三种动画,分别是x方向,y方向,xy方向。

  • animateX(int durationMillis): x轴方向
  • animateY(int durationMillis): y轴方向
  • animateXY(int xDuration, int yDuration): xy轴方向
mChart.animateX(3000f); // animate horizontal 3000 milliseconds
// or:
mChart.animateY(3000f); // animate vertical 3000 milliseconds
// or:
mChart.animateXY(3000f, 3000f); // animate horizontal and vertical 3000 milliseconds

注意:如果调用动画方法后,就没有必要调用invalidate()方法,来刷新界面了。

添加数据到图表:

下面是MPAndroidChart中的一个demo实例,简单介绍怎么添加数据到图表中,以及动画显示。

[java]  view plain  copy
  1. package com.xxmassdeveloper.mpchartexample;  
  2.   
  3. import android.graphics.Color;  
  4. import android.graphics.Typeface;  
  5. import android.os.Bundle;  
  6. import android.view.WindowManager;  
  7.   
  8. import com.github.mikephil.charting.charts.LineChart;  
  9. import com.github.mikephil.charting.data.Entry;  
  10. import com.github.mikephil.charting.data.LineData;  
  11. import com.github.mikephil.charting.data.LineDataSet;  
  12. import com.github.mikephil.charting.utils.Legend;  
  13. import com.github.mikephil.charting.utils.Legend.LegendForm;  
  14. import com.github.mikephil.charting.utils.XLabels;  
  15. import com.github.mikephil.charting.utils.YLabels;  
  16. import com.xxmassdeveloper.mpchartexample.notimportant.DemoBase;  
  17.   
  18. import java.util.ArrayList;  
  19.   
  20. public class LineChartActivityColored extends DemoBase {  
  21.   
  22.     LineChart[] mCharts = new LineChart[4]; // 4条数据  
  23.     Typeface mTf; // 自定义显示字体  
  24.     int[] mColors = new int[] { Color.rgb(13723081), Color.rgb(24024030),//  
  25.             Color.rgb(89199250), Color.rgb(250104104) }; // 自定义颜色  
  26.   
  27.     @Override  
  28.     protected void onCreate(Bundle savedInstanceState) {  
  29.         super.onCreate(savedInstanceState);  
  30.         getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);  
  31.         setContentView(R.layout.activity_colored_lines);  
  32.   
  33.         mCharts[0] = (LineChart) findViewById(R.id.chart1);  
  34.         mCharts[1] = (LineChart) findViewById(R.id.chart2);  
  35.         mCharts[2] = (LineChart) findViewById(R.id.chart3);  
  36.         mCharts[3] = (LineChart) findViewById(R.id.chart4);  
  37.   
  38.         // 自定义字体  
  39.         mTf = Typeface.createFromAsset(getAssets(), "OpenSans-Bold.ttf");  
  40.         // 生产数据  
  41.         LineData data = getData(36100);  
  42.   
  43.         for (int i = 0; i < mCharts.length; i++) {  
  44.             // add some transparency to the color with "& 0x90FFFFFF"  
  45.             setupChart(mCharts[i], data, mColors[i % mColors.length]);  
  46.         }  
  47.     }  
  48.     // 设置显示的样式  
  49.     void setupChart(LineChart chart, LineData data, int color) {  
  50.         // if enabled, the chart will always start at zero on the y-axis  
  51.         chart.setStartAtZero(true);  
  52.   
  53.         // disable the drawing of values into the chart  
  54.         chart.setDrawYValues(false);  
  55.   
  56.         chart.setDrawBorder(false);  
  57.   
  58.         // no description text  
  59.         chart.setDescription("");// 数据描述  
  60.         // 如果没有数据的时候,会显示这个,类似listview的emtpyview  
  61.         chart.setNoDataTextDescription("You need to provide data for the chart.");  
  62.   
  63.         // enable / disable grid lines  
  64.         chart.setDrawVerticalGrid(false); // 是否显示水平的表格  
  65.         // mChart.setDrawHorizontalGrid(false);  
  66.         //  
  67.         // enable / disable grid background  
  68.         chart.setDrawGridBackground(false); // 是否显示表格颜色  
  69.         chart.setGridColor(Color.WHITE & 0x70FFFFFF); // 表格的的颜色,在这里是是给颜色设置一个透明度  
  70.         chart.setGridWidth(1.25f);// 表格线的线宽  
  71.   
  72.         // enable touch gestures  
  73.         chart.setTouchEnabled(true); // 设置是否可以触摸  
  74.   
  75.         // enable scaling and dragging  
  76.         chart.setDragEnabled(true);// 是否可以拖拽  
  77.         chart.setScaleEnabled(true);// 是否可以缩放  
  78.   
  79.         // if disabled, scaling can be done on x- and y-axis separately  
  80.         chart.setPinchZoom(false);//   
  81.   
  82.         chart.setBackgroundColor(color);// 设置背景  
  83.   
  84.         chart.setValueTypeface(mTf);// 设置字体  
  85.   
  86.         // add data  
  87.         chart.setData(data); // 设置数据  
  88.   
  89.         // get the legend (only possible after setting data)  
  90.         Legend l = chart.getLegend(); // 设置标示,就是那个一组y的value的  
  91.   
  92.         // modify the legend ...  
  93.         // l.setPosition(LegendPosition.LEFT_OF_CHART);  
  94.         l.setForm(LegendForm.CIRCLE);// 样式  
  95.         l.setFormSize(6f);// 字体  
  96.         l.setTextColor(Color.WHITE);// 颜色  
  97.         l.setTypeface(mTf);// 字体  
  98.   
  99.         YLabels y = chart.getYLabels(); // y轴的标示  
  100.         y.setTextColor(Color.WHITE);  
  101.         y.setTypeface(mTf);  
  102.         y.setLabelCount(4); // y轴上的标签的显示的个数  
  103.   
  104.         XLabels x = chart.getXLabels(); // x轴显示的标签  
  105.         x.setTextColor(Color.WHITE);  
  106.         x.setTypeface(mTf);  
  107.   
  108.         // animate calls invalidate()...  
  109.         chart.animateX(2500); // 立即执行的动画,x轴  
  110.     }  
  111.   
  112.     // 生成一个数据,  
  113.     LineData getData(int count, float range) {  
  114.         ArrayList xVals = new ArrayList();  
  115.         for (int i = 0; i < count; i++) {  
  116.             // x轴显示的数据,这里默认使用数字下标显示  
  117.             xVals.add(mMonths[i % 12]);  
  118.         }  
  119.   
  120.         // y轴的数据  
  121.         ArrayList yVals = new ArrayList();  
  122.         for (int i = 0; i < count; i++) {  
  123.             float val = (float) (Math.random() * range) + 3;  
  124.             yVals.add(new Entry(val, i));  
  125.         }  
  126.   
  127.         // create a dataset and give it a type  
  128.         // y轴的数据集合  
  129.         LineDataSet set1 = new LineDataSet(yVals, "DataSet 1");  
  130.         // set1.setFillAlpha(110);  
  131.         // set1.setFillColor(Color.RED);  
  132.   
  133.         set1.setLineWidth(1.75f); // 线宽  
  134.         set1.setCircleSize(3f);// 显示的圆形大小  
  135.         set1.setColor(Color.WHITE);// 显示颜色  
  136.         set1.setCircleColor(Color.WHITE);// 圆形的颜色  
  137.         set1.setHighLightColor(Color.WHITE); // 高亮的线的颜色  
  138.   
  139.         ArrayList dataSets = new ArrayList();  
  140.         dataSets.add(set1); // add the datasets  
  141.   
  142.         // create a data object with the datasets  
  143.         LineData data = new LineData(xVals, dataSets);  
  144.   
  145.         return data;  
  146.     }  
  147. }  

运行效果图如下:



你可能感兴趣的:(Android图形动画)