最近一个项目需要用到表格进行统计显示,本来用的是的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) (线性图)
  • LineChart (with legend, simple design) (线性图)

  • LineChart (cubic lines) (线性图)

  • LineChart (single DataSet) (线性图)

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

  • BarChart2D (grouped DataSets) (柱状图)

  • BarChart2D

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

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

  • CandleStickChart  (for financial data)

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

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

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

步骤:

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

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

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

  1. 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轴方向
  1. mChart.animateX(3000f); // animate horizontal 3000 milliseconds
  2. // or:
  3. mChart.animateY(3000f); // animate vertical 3000 milliseconds
  4. // or:
  5. mChart.animateXY(3000f, 3000f); // animate horizontal and vertical 3000 milliseconds

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

添加数据到图表:

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

  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(137, 230, 81), Color.rgb(240, 240, 30),//
  25. Color.rgb(89, 199, 250), Color.rgb(250, 104, 104) }; // 自定义颜色
  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(36, 100);
  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<String> xVals = new ArrayList<String>();
  115. for (int i = 0; i < count; i++) {
  116. // x轴显示的数据,这里默认使用数字下标显示
  117. xVals.add(mMonths[i % 12]);
  118. }
  119.  
  120. // y轴的数据
  121. ArrayList<Entry> yVals = new ArrayList<Entry>();
  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<LineDataSet> dataSets = new ArrayList<LineDataSet>();
  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. }

运行效果图如下:

MPAndroidChart绘制图形表的更多相关文章

  1. 11-UIKit(Storyboard、View的基本概念、绘制图形、UIBezierPath)

    目录: 1. Storyboard 2. Views 3. View的基本概念介绍 4. 绘制图形 5. UIBezierPath 回到顶部 1. Storyboard 1.1 静态表视图 1)Sec ...

  2. 在Android中使用OpenGL ES进行开发第(三)节:绘制图形

    一.前期基础知识储备笔者计划写三篇文章来详细分析OpenGL ES基础的同时也是入门关键的三个点: ①OpenGL ES是什么?与OpenGL的关系是什么?——概念部分 ②使用OpenGLES绘制2D ...

  3. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  4. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  5. html5 canvas 笔记一(基本用法与绘制图形)

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  6. WPF2D绘制图形方法

    我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...

  7. HTML5—canvas绘制图形(1)

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  8. 【canvas学习笔记二】绘制图形

    上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...

  9. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

随机推荐

  1. yield语句

        自C#的第一个版本以来,使用foreach语句可以轻松地迭代集合.在C#1.0中,创建枚举器仍需要做大量的工作.C#2.0添加了yield语句,以便于创建枚举器.yield return语句返 ...

  2. 浏览器桌面通知(notifications)

    近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了.经过查找发现有些浏览器能够使用noitfications.能够在桌 ...

  3. ASP.Net【如何合并DataTable,并且去重复方法】

    虽然DataTable.Merge可以很好的实现,但以下代码写出来更好理解 DataTable DataTable1 = new DataTable(); DataTable DataTable2 = ...

  4. jQuery Tags Input Plugin 插件的使用

    一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能. 官网:http://xoxco.com/pr ...

  5. Free Sql Server SMSS format Plugin

    免费Sql Server 格式化插件 http://www.apexsql.com/sql_tools_refactor.aspx http://architectshack.com/PoorMans ...

  6. 全站 HTTPS

    1.HTTPS 基础 HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议 它是一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信 ...

  7. UIButton, KVC, KVO

    按钮 自定义按钮:调整内部子控件的frame 方式1:实现titleRectForContentRect:和imageRectForContentRect:方法,分别返回titleLabel和imag ...

  8. 关于UIScrollView属性跟方法的总结

    iOS中UIScollView的总结 在iOS开发中可以说UIScollView是所有滑动类视图的基础,包括UITableView,UIWebView,UICollectionView等等,UIScr ...

  9. .NET自动更新

    asp.net b/s就是布置在服务器的.你这个是要单机版的更新机制,博客园里面好几篇文章说这事呢. http://www.cnblogs.com/cnsharp/archive/2013/04/11 ...

  10. Java log4j的环境搭建

    一.Log4j是什么? Log4j是Apache的一个开源代码项目,通过使用Log4j,我们可以控制日志信息输出的目的地.最常见的就是输出到控制台或者日志文件.同时,它强大的一点是可以在C.C++等其 ...