MPAndroidChart的类似软件 - Android 图表库 - 开源中国社区
当前访客身份：游客 [
当前位置：
MPAndroidChart
MPAndroidChart 是 Android 系统上一款开源的图表库。目前提供线图和饼图，支持选择、缩放和拖放。
示例代码：
LineData&ld&=&new&LineData(...);
LimitLine&ll&=&new&LimitLine(140f);
ll.setLineColor(Color.RED);
ll.setLineWidth(4f);
//&..&and&more&styling&options
ld.addLimitLine(ll);
LineChart (with legend, simple design)
LineChart (with legend, simple design)
LineChart (single DataSet)
BarChart2D (with legend, simple design)
BarChart2D (single DataSet)
BarChart2D (multiple DataSets)
BarChart3D
PieChart (with selection, ...)
ScatterChart (with squares, triangles, circles, ... and more)
授权协议：
开发语言：
操作系统：&Android&
收录时间： 日
MPAndroidChart 的类似软件，共266个
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户...
最新新闻：
Open Flash Chart 是一个用来生成Flash的图表的组件，项目首页有很多漂亮的Flash图表以及使用示例。
最新新闻：
Highcharts是一个制作图表的纯Javascript类库，主要特性如下： 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； 对个人用户完全免费； 纯JS，无BS； 支持大部分的图表类型：直线图，曲线图、区域图、区...
最新新闻：
JFreeChart主要用来各种各样的图表，这些图表包括：饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。 JavaDoc文档：http://www.ostools.net/apidocs/apidoc?a...
最新新闻：
xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript 图表库，他使用HTML，CSS，SVG实现图表，xCharts 被设计为一个动态的、流畅的、开放的和可定制化的库。 下面是演示效果：...
最新新闻：
AChartEngine是为android应用而设计的绘图工具库。目前该库的最新稳定版本是0.7，支持绘制以下类型的图表: line chart area chart scatter chart time chart bar chart pie chart bubble chart doughnut chart ra...
这是一个针对 ECharts 2.0 版本的Java类库，实现了所有ECharts中的Json结构对应的Java对象，并且可以很方便的创建Option 本项目是一个供Java开发使用的ECharts的开发包，主要目的是方便在Java中构造ECharts中可能...
最新新闻：
DynamicReports 是一个基于 JasperReports 进行扩展的 Java 报表库，可用它来快速创建报表而无需可视化报表设计工具。
最新新闻：
Finger Chart 是一个轻量级的基于Flash技术开发的图表解决方案(未来考虑扩展到HTML5平台)，基于LGPL协议开源。图表包括常见图表类型：线图，柱图，条图，饼图，区域图，散点图，气泡图等； Finger的应用目标是：W...
最新新闻：
JasperWave 是一个 Eclipse 插件，用来设计 JasperReports 报表。 主要特点： WYSIWYG 所见即所得的报表设计器 支持数据源包括：JDBC, XML, Java beans(POJO), CSV, Excel 支持 SQL 和 XML 的可视化查询构建 支持...
最新新闻：
使用 MPAndroidChart 中的任何问题
：您好，怎么把20%这些字设置去掉呢？
：android总算是有个报表工具用了
：有用过的么，如何？
共有 266 个类似软件
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascr...
Open Flash Chart 是一个用来生成Flash的图表的组件，项目首页有很多漂亮的Flash图...
Highcharts是一个制作图表的纯Javascript类库，主要特性如下： 兼容性：兼容当今所...
JFreeChart主要用来各种各样的图表，这些图表包括：饼图、柱状图(普通柱状图以及堆...
xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript 图表库，...
AChartEngine是为android应用而设计的绘图工具库。目前该库的最新稳定版本是0.7，支...
这是一个针对 ECharts 2.0 版本的Java类库，实现了所有ECharts中的Json结构对应的J...
DynamicReports 是一个基于 JasperReports 进行扩展的 Java 报表库，可用它来快速创...
Finger Chart 是一个轻量级的基于Flash技术开发的图表解决方案(未来考虑扩展到HTM...
JasperWave 是一个 Eclipse 插件，用来设计 JasperReports 报表。 主要特点： WYSI...
共有 344 人关注 MPAndroidChartMPAndroidChart的具体属性方法(二)-android100学习网
MPAndroidChart的具体属性方法(二)
......好懒......就不改了 package com.ashzheng.import android.app.Aimport androi
......好懒......就不改了
package com.ashzheng.import android.app.Aimport android.graphics.Cimport android.graphics.PointF;import android.os.Bimport android.view.Vimport com.github.mikephil.charting.charts.LineCimport com.github.ponents.Limport com.github.ponents.LimitLimport com.github.ponents.XAimport com.github.ponents.YAimport com.github.mikephil.charting.data.Eimport com.github.mikephil.charting.data.LineDimport com.github.mikephil.charting.data.LineDataSimport java.util.ArrayLpublic class MainActivity extends Activity {
private LineChart mLineC
private XAxis xA
private YAxis yA
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLineChart = (LineChart) findViewById(R.id.chart);
xAxis = mLineChart.getXAxis();
yAxis = mLineChart.getAxisLeft();
LineData mLineData = getLineData();
modifyingTheViewport();
animations();
markerView();
miscellaneous();
//showChart(mLineChart, mLineData);
private void miscellaneous() {
mLineChart.getData();
//返回这个图表中的data类型的值，
mLineChart.getViewPortHandler();
//返回这个图表中的各种状态，返回类型为ViewPortHandler
mLineChart.getRenderer();
//返回绘制图表的数据，类型是DataRenderer
PointF pointF = new PointF();
pointF = mLineChart.getCenter();
//返回中心点，返回类型是PointF，即(x,y)
mLineChart.getCenterOffsets();
//返回图表绘制区域的中心点
mLineChart.getYMin();
//返回 数据Y的最小值 返回值是float类型
mLineChart.getYMax();
//返回 数据Y的最大值 返回值是float类型
System.out.println(mLineChart.getHighestVisibleXIndex());
mLineChart.getLowestVisibleXIndex();
//返回 能见到的X的最小值下标 返回值是int类型
mLineChart.getHighestVisibleXIndex();
//返回 能见到的X的最大值下标 返回值是int类型
mLineChart.getChartBitmap();
//返回 最后状态的图表的Bitmap
//。。。。。。
private void markerView() {
private void animations() {
//动画效果在API版本11(Android 3.0.X)以上才能起作用，低版本不会执行，但不会崩溃
//执行动画并不会刷新表格 即执行invalidate();方法////
mLineChart.animateX(1000); //从左到右绘制图形，参数是int类型的 持续时间////
mLineChart.animateY(3000); //从下到上绘制图形，参数是int类型的 持续时间
mLineChart.animateXY(); //x,y同时绘制，参数是(int xDuration, int yDuration)
private void modifyingTheViewport() {
mLineChart.setVisibleXRangeMaximum(5);
//一个界面显示多少个点，其他点可以通过滑动看到
mLineChart.setVisibleXRangeMinimum(3);
//一个界面最少显示多少个点，放大后最多 放大到 剩多少 个点//
mLineChart.setViewPortOffsets(0,0,0, 0);
//设置图表显示的偏移量，不建议使用，因为会影响图表的自动计算
mLineChart.resetViewPortOffsets();
//重新设置图表显示的偏移量，自动计算,可取消上面的那个操作//
mLineChart.setExtraOffsets(20, 30, 50, 10);
//设置图表外，布局内显示的偏移量
mLineChart.fitScreen();
//重置图表的缩放，拖动并使图表符合它的界限
mLineChart.moveViewToX(2);
//将左边的边放到指定的位置，参数是（float xindex）
mLineChart.zoomIn();
//默认视图放大1.4倍，
mLineChart.zoomOut();
//默认视图缩小到0.7倍，
mLineChart.zoom(1.0f,1.0f,0f,0f);
//自定义缩放(float scaleX, float scaleY, float x, float y)X缩放倍数，Y缩放倍数，x坐标，y坐标。1f是原大小
private void showChart(LineChart lineChart, LineData lineData) {
//General Chart Styling 通用的图表造型，还有些对于特定图表有这特定方法的造型。
//请参考/PhilJay/MPAndroidChart/wiki/Specific-chart-settings
lineChart.setBackgroundColor(Color.argb(0, 173, 215, 210));// 设置图表背景 参数是个Color对象
lineChart.setDescription("setDescription我在这儿"); //图表默认右下方的描述，参数是String对象
lineChart.setDescriptionColor(Color.rgb(227, 135, 0));
//上面字的颜色，参数是Color对象//
lineChart.setDescriptionPosition(400f,600f);
//上面字的位置，参数是float类型，像素，从图表左上角开始计算//
lineChart.setDescriptionTypeface();
//上面字的字体，参数是Typeface 对象
lineChart.setDescriptionTextSize(16);
//上面字的大小，float类型[6,16]
lineChart.setNoDataTextDescription("没有数据呢(⊙o⊙)");
//没有数据时显示在中央的字符串，参数是String对象
lineChart.setDrawGridBackground(false);//设置图表内格子背景是否显示，默认是false
lineChart.setGridBackgroundColor(Color.rgb(255, 0, 0));//设置格子背景色,参数是Color类型对象
lineChart.setDrawBorders(true);
//设置图表内格子外的边框是否显示
lineChart.setBorderColor(Color.rgb(236, 228, 126));
//上面的边框颜色
lineChart.setBorderWidth(20);
//上面边框的宽度，float类型，dp单位//
lineChart.setMaxVisibleValueCount();设置图表能显示的最大值，仅当setDrawValues()属性值为true时有用
//Interaction with the Chart 图表的交互
//Enabling / disabling interaction
lineChart.setTouchEnabled(true); // 设置是否可以触摸
lineChart.setDragEnabled(true);// 是否可以拖拽
lineChart.setScaleEnabled(true);// 是否可以缩放 x和y轴, 默认是true
lineChart.setScaleXEnabled(true); //是否可以缩放 仅x轴
lineChart.setScaleYEnabled(true); //是否可以缩放 仅y轴
lineChart.setPinchZoom(true);
//设置x轴和y轴能否同时缩放。默认是否
lineChart.setDoubleTapToZoomEnabled(true);//设置是否可以通过双击屏幕放大图表。默认是true
lineChart.setHighlightEnabled(false);
//If set to true, highlighting/selecting values via touch is possible for all underlying DataSets.
lineChart.setHighlightPerDragEnabled(true);//能否拖拽高亮线(数据点与坐标的提示线)，默认是true
lineChart.setAutoScaleMinMaxEnabled(false);
// Chart fling / deceleration
lineChart.setDragDecelerationEnabled(true);//拖拽滚动时，手放开是否会持续滚动，默认是true（false是拖到哪是哪，true拖拽之后还会有缓冲）
lineChart.setDragDecelerationFrictionCoef(0.99f);//与上面那个属性配合，持续滚动时的速度快慢，[0,1) 0代表立即停止。
//Highlighting programmatically//
highlightValues(Highlight[] highs)//
Highlights the values at the given indices in the given DataSets. Provide null or an empty array to undo all highlighting.//
highlightValue(int xIndex, int dataSetIndex)//
Highlights the value at the given x-index in the given DataSet. Provide -1 as the x-index or dataSetIndex to undo all highlighting.//
getHighlighted()//
Returns an Highlight[] array that contains information about all highlighted entries, their x-index and dataset-index.
//其他请参考/PhilJay/MPAndroidChart/wiki/Interaction-with-the-Chart
//如手势相关方法，选择回调方法//
The Axis 坐标轴相关的,XY轴通用
xAxis.setEnabled(true);
//是否显示X坐标轴 及 对应的刻度竖线，默认是true
xAxis.setDrawAxisLine(true); //是否绘制坐标轴的线，即含有坐标的那条线，默认是true
xAxis.setDrawGridLines(true); //是否显示X坐标轴上的刻度竖线，默认是true
xAxis.setDrawLabels(true); //是否显示X坐标轴上的刻度，默认是true
xAxis.setTextColor(Color.rgb(145, 13, 64)); //X轴上的刻度的颜色
xAxis.setTextSize(5); //X轴上的刻度的字的大小 单位dp//
xAxis.setTypeface(Typeface tf); //X轴上的刻度的字体
xAxis.setGridColor(Color.rgb(145, 13, 64)); //X轴上的刻度竖线的颜色
xAxis.setGridLineWidth(1); //X轴上的刻度竖线的宽 float类型
xAxis.enableGridDashedLine(40, 3, 0); //虚线表示X轴上的刻度竖线(float lineLength, float spaceLength, float phase)三个参数，1.线长，2.虚线间距，3.虚线开始坐标
//可以设置一条警戒线，如下：
LimitLine ll = new LimitLine(40f, "警戒线");
ll.setLineColor(Color.RED);
ll.setLineWidth(4f);
ll.setTextColor(Color.GRAY);
ll.setTextSize(12f);
// .. and more styling options
xAxis.addLimitLine(ll);//
xAxis.setLabelsToSkip(1);
//设置坐标相隔多少，参数是int类型
xAxis.resetLabelsToSkip();
//将自动计算坐标相隔多少
xAxis.setAvoidFirstLastClipping(true);
xAxis.setSpaceBetweenLabels(4);
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM_INSIDE);//把坐标轴放在上下 参数有：TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE or BOTTOM_INSIDE.//
yAxis.setStartAtZero(true);
//设置Y轴坐标是否从0开始
yAxis.setAxisMaxValue(50);
//设置Y轴坐标最大为多少
yAxis.resetAxisMaxValue();
//重新设置Y轴坐标最大为多少，自动调整
yAxis.setAxisMinValue(10);
//设置Y轴坐标最小为多少
yAxis.resetAxisMinValue();
//重新设置Y轴坐标，自动调整
yAxis.setInverted(false);
//Y轴坐标反转,默认是false,即下小上大
yAxis.setSpaceTop(0);
//Y轴坐标距顶有多少距离，即留白
yAxis.setSpaceBottom(0);
//Y轴坐标距底有多少距离，即留白
yAxis.setShowOnlyMinMax(false);
//参数如果为true Y轴坐标只显示最大值和最小值
yAxis.setLabelCount(10, false);
//第一个参数是Y轴坐标的个数，第二个参数是 是否不均匀分布，true是不均匀分布
yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
//参数是INSIDE_CHART(Y轴坐标在内部) 或 OUTSIDE_CHART(在外部（默认是这个）)//
yAxis.setValueFormatter(YAxisValueFormatterf);//
Sets a custom ValueFormatter for this axis. This interface allows to format/modify//
the original label text and instead return a customized text.
//lineChart.setData(lineData); //添加数据
Legend mLegend = lineChart.getLegend(); // 设置坐标线描述?? 的样式
mLegend.setEnabled(true);
mLegend.setTextColor(Color.rgb(255, 255, 255));// 坐标线描述文字的颜色
mLegend.setTextSize(15);// 坐标线描述文字的大小，单位dp//
mLegend.setTypeface(mTf);// 坐标线描述文字的字体
mLegend.setWordWrapEnabled(true); //坐标线描述 是否 不允许出边界
mLegend.setMaxSizePercent(0.95f);
//坐标线描述 占据的大小x%
默认0.95 即95%
mLegend.setPosition(Legend.LegendPosition.BELOW_CHART_CENTER);//位置 RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER,
// RIGHT_OF_CHART_INSIDE, BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER or PIECHART_CENTER (PieChart only), ... and more
mLegend.setForm(Legend.LegendForm.CIRCLE);// 样式SQUARE, CIRCLE or LINE.
mLegend.setFormSize(10f);// 大小 单位dp
mLegend.setXEntrySpace(20f);// 条目的水平间距
mLegend.setYEntrySpace(20f);// 条目的垂直间距
mLegend.setFormToTextSpace(20f);//Sets the space between the legend-label and the corresponding legend-form.
public void clickMe(View view){
//添加坐标线
LineData data = mLineChart.getData();
if(data != null) {
int count = (data.getDataSetCount() + 1);
// create 10 y-vals
ArrayList&Entry& yVals = new ArrayList&Entry&();
if(data.getXValCount() == 0) {
// add 10 x-entries
for (int i = 0; i & 10; i++) {
data.addXValue("" + (i+1));
for (int i = 0; i & data.getXValCount(); i++) {
yVals.add(new Entry((float) (Math.random() * 50f) + 50f * count, i));
LineDataSet set = new LineDataSet(yVals, "DataSet " + count);
set.setLineWidth(2.5f);
set.setCircleSize(4.5f);
int color = Color.rgb(255,0,0);
set.setColor(color);
set.setCircleColor(color);
//设置结点圆圈的颜色
set.setHighLightColor(Color.rgb(0,255,0));
//设置 坐标提示线的颜色
set.setValueTextSize(30f);
//设置坐标提示文字的大小
set.setValueTextColor(Color.rgb(0,0,255));
//设置坐标提示文字的颜色
data.addDataSet(set);
mLineChart.notifyDataSetChanged();
mLineChart.invalidate();
public void clickMe2(View view) {
//删除坐标线
LineData data = mLineChart.getData();
if(data != null) {
data.removeDataSet(data.getDataSetByIndex(data.getDataSetCount() - 1));
mLineChart.notifyDataSetChanged();
mLineChart.invalidate();
private LineData getLineData() {
ArrayList&Entry& valsComp1 = new ArrayList&Entry&();
//坐标点的集合
ArrayList&Entry& valsComp2 = new ArrayList&Entry&();
Entry c1e1 = new Entry(100.000f, 1); //坐标点的值，Entry(Y坐标，X坐标)；
valsComp1.add(c1e1);
Entry c1e2 = new Entry(50.000f, 2);
valsComp1.add(c1e2);
Entry c1e3 = new Entry(60.000f, 3);
valsComp1.add(c1e3);
Entry c1e4 = new Entry(70.000f, 4);
valsComp1.add(c1e4);
Entry c2e1 = new Entry(30.000f, 1); //坐标点的值，Entry(Y坐标，X坐标)；
valsComp2.add(c2e1);
Entry c2e2 = new Entry(80.000f, 2);
valsComp2.add(c2e2);
Entry c2e3 = new Entry(30.000f, 3); //坐标点的值，Entry(Y坐标，X坐标)；
valsComp2.add(c2e3);
Entry c2e4 = new Entry(90.000f, 4);
valsComp2.add(c2e4);
LineDataSet setComp1 = new LineDataSet(valsComp1, "Company");
//坐标线，LineDataSet(坐标点的集合, 线的描述或名称);
LineDataSet setComp2 = new LineDataSet(valsComp2, "Company");
setComp1.setAxisDependency(YAxis.AxisDependency.LEFT);
//以左边坐标轴为准 还是以右边坐标轴为基准
setComp2.setAxisDependency(YAxis.AxisDependency.LEFT);
setComp1.setColors(new int[]{R.color.red1, R.color.red2, R.color.red3, R.color.red4}, this);
setComp2.setColors(new int[]{R.color.green1, R.color.green2, R.color.green3, R.color.green4}, this);
ArrayList&LineDataSet& dataSets = new ArrayList&LineDataSet&(); //坐标线的集合。
dataSets.add(setComp1);
dataSets.add(setComp2);
ArrayList&String& xVals = new ArrayList&String&();
//X坐标轴的值的集合
xVals.add("1.Q"); xVals.add("2.Q"); xVals.add("3.Q"); xVals.add("4.Q");
xVals.add("1.Q"); xVals.add("2.Q"); xVals.add("3.Q"); xVals.add("4.Q");
LineData data = new LineData(xVals, dataSets);
//LineData(X坐标轴的集合, 坐标线的集合);
mLineChart.setData(data);
//为图表添加 数据
mLineChart.invalidate(); // 重新更新显示MPAndroidChart玩转折线图、柱形图、饼状图、散列图、雷达图 - 推酷
MPAndroidChart玩转折线图、柱形图、饼状图、散列图、雷达图
第一步：不废话，先爆照
第二步：介绍MPAndroidChart适用场景并把它的库文件导入我们开发的项目
MPAndroidChart是一款基于Android的开源图表库，MPAndroidChart不仅可以在Android设备上绘制各种统计图表，而且可以对图表进行拖动和缩放操作，应用起来非常灵活。
MPAndroidChart同样拥有常用的图表类型：线型图、饼图、柱状图和散点图和雷达图。
github地址：
适用场景：
如果您的应用涉及大量数据，利用图表，用表显示的数据可能会得到一个好得多的用户体验
把MPAndroidChart导入我们的项目：
我是先用git clone下来，然后把项目的MPChartLib改名为mplib导入我们的项目新建的lib文件夹，然后配置项目里面的gradle 、settings.gradle和我们项目同步。
github地址：
，图片如下
复制mpandroidchartlibrary-1-7-4.jar到项目的库目录,下载地址：
在Android的Studio中，右键单击该JAR文件，然后选择 &add as library。
第三步：现实柱形图
我先把项目的结构爆出来，让大家有个心里面有个底
这是menu_main.xml文件
activity_main.xml文件如下
&RelativeLayout xmlns:android=&/apk/res/android&
xmlns:tools=&/tools& android:layout_width=&match_parent&
android:layout_height=&match_parent&
tools:context=&.MainActivity&
&RelativeLayout
android:id=&@+id/content&
android:layout_width=&fill_parent&
android:layout_height=&fill_parent& /&
&/RelativeLayout&
这是MainActivity.java文件
package com.example.chenyu.
import android.app.FragmentM
import android.app.FragmentT
import android.support.v7.app.AppCompatA
import android.os.B
import android.view.M
import android.view.MenuI
import android.view.ViewC
import java.lang.reflect.F
public class MainActivity extends AppCompatActivity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FragmentManager fm = getFragmentManager();
// 开启Fragment事务
FragmentTransaction transaction = fm.beginTransaction();
BarCharFragment barCharFragment = new BarCharFragment();
transaction.replace(R.id.content, barCharFragment);
//显示右上角的3个点
makeActionOverflowMenuShown();
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
public boolean onOptionsItemSelected(MenuItem item) {
FragmentManager fm = getFragmentManager();
// 开启Fragment事务
FragmentTransaction transaction = fm.beginTransaction();
int id = item.getItemId();
switch (id) {
case R.id.BarChart:
BarCharFragment barCharFragment = new BarCharFragment();
transaction.replace(R.id.content, barCharFragment);
case R.id.LineChart:
LineCharFragment lineCharFragment = new LineCharFragment();
transaction.replace(R.id.content, lineCharFragment);
case R.id.RadarChart:
RadarCharFragment radarCharFragment = new RadarCharFragment();
transaction.replace(R.id.content, radarCharFragment);
case R.id.PieChart:
PieCharFragment pieCharFragment = new PieCharFragment();
transaction.replace(R.id.content, pieCharFragment);
case R.id.ScatterChart:
ScatterChartFragment scatterChartFragment = new ScatterChartFragment();
transaction.replace(R.id.content, scatterChartFragment);
return super.onOptionsItemSelected(item);
private void makeActionOverflowMenuShown() {
//devices with hardware menu button (e.g. Samsung Note) don't show action overflow menu
ViewConfiguration config = ViewConfiguration.get(this);
Field menuKeyField = ViewConfiguration.class.getDeclaredField(&sHasPermanentMenuKey&);
if (menuKeyField != null) {
menuKeyField.setAccessible(true);
menuKeyField.setBoolean(config, false);
} catch (Exception e) {
我的手机是小米2s，如果不加上makeActionOverflowMenuShow()方法右上角的那3个点现实不出来
然后是BarCharFragment.java文件
package com.example.chenyu.
import android.app.F
import android.os.B
import android.support.annotation.N
import android.view.LayoutI
import android.view.V
import android.view.ViewG
import com.github.mikephil.charting.charts.BarC
import com.github.ponents.LimitL
import com.github.mikephil.charting.data.BarD
import com.github.mikephil.charting.data.BarDataS
import com.github.mikephil.charting.data.BarE
import com.github.mikephil.charting.utils.ColorT
import java.util.ArrayL
* Created by Think on .
public class BarCharFragment extends Fragment {
public BarChart barC
public ArrayList&BarEntry& entries = new ArrayList&BarEntry&();
public BarDataS
public ArrayList&String& labels = new ArrayList&String&();
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.bar_chart, container, false);
barChart = (BarChart) view.findViewById(R.id.bar_chart);
initEntriesData();
initLableData();
public void initEntriesData() {
entries.add(new BarEntry(4f, 0));
entries.add(new BarEntry(8f, 1));
entries.add(new BarEntry(6f, 2));
entries.add(new BarEntry(12f, 3));
entries.add(new BarEntry(18f, 4));
entries.add(new BarEntry(9f, 5));
public void initLableData() {
labels.add(&一月&);
labels.add(&二月&);
labels.add(&三月&);
labels.add(&四月&);
labels.add(&五月&);
labels.add(&六月&);
public void show() {
dataset = new BarDataSet(entries, &# of Calls&);
dataset.setColors(ColorTemplate.COLORFUL_COLORS);
BarData data = new BarData(labels, dataset);
LimitLine line = new LimitLine(10f);
barChart.setData(data);
chart.animateXY();
chart.animateX(5000);
barChart.animateY(2000);
barChart.setDescription(&hello MPandroidChart&);
代码解说：
所有数据应该转换成一个数据集 &对象之前它可用于由一个图表。不同类型的图表中使用不同的子类 &的DataSet &类。例如，一个BARCHART使用BarDataSet &实例。同样，饼图使用PieDataSet &实例。
我们定义X的标签：
ArrayList&String& labels = new ArrayList&String&();
labels.add(&January&);
labels.add(&February&);
labels.add(&March&);
labels.add(&April&);
labels.add(&May&);
labels.add(&June&);
我们定义Y的标签：
也就是我们Y值，上面知道X有6个值了，然后需要对应的Y值，我们需要创建BarEntry(y,x)对象，这里面的y对应y的值，然后x对应我么的下标
然后把这些BarEntry放入ArrayList集合里面，就像一个键值对一样，
public void initEntriesData() {
entries.add(new BarEntry(4f, 0));
entries.add(new BarEntry(8f, 1));
entries.add(new BarEntry(6f, 2));
entries.add(new BarEntry(12f, 3));
entries.add(new BarEntry(18f, 4));
entries.add(new BarEntry(9f, 5));
创建我们的图表：
首先我们需要BarChart里面要有数据吧，实现下面二行代码
BarData data = new BarData(labels, dataset);
chart.setData(data);
为图表添加描述
barChart.setDescription(&hello MPandroidChart&);
默认是天蓝色的，但是我们可以修改树状图的颜色
下面的颜色只要选一个就行，你感兴趣就一个一个试一下
ColorTemplate.LIBERTY_COLORS
ColorTemplate.COLORFUL_COLORS
ColorTemplate.JOYFUL_COLORS
ColorTemplate.PASTEL_COLORS
ColorTemplate.VORDIPLOM_COLORS
记得加上下面的代码，不然没有颜色，我是用的ColorTemplate.COLORFUL_COLORS，so cool
dataset.setColors(ColorTemplate.COLORFUL_COLORS);
当然还有添加动画
chart.animateXY();
chart.animateX(5000);
barChart.animateY(2000);
至于每个是什么效果，你自己可以亲测下
当然你还可以保存图片
MPAndroidChart，您还可以在图表的当前状态保存为图像。要使用此功能，你首先需要给你的应用程序写入到设备的SD卡的权限。您可以通过添加如下代码到你做到这一点的AndroidManifest.xml：
& 使用-权限 的Android：名称=“android.permission.WRITE_EXTERNAL_STORAGE”/&
有两种方法可供选择：
saveToGallery &此方法保存您的图表为JPEG文件。它也可以让你指定的质量或图像的压缩比。
saveToPath &此方法保存您的图表为PNG文件的路径指定。
例如，你的图表保存为JPEG文件，可以使用下面的代码片段：
chart.saveToGallery（“mychart.jpg”，85）; // 85是图像的质量
然后爆效果图
第四步：实现折线图
liner_chart.xml文件如下
&RelativeLayout xmlns:android=&/apk/res/android&
xmlns:tools=&/tools& android:layout_width=&match_parent&
android:layout_height=&match_parent& android:paddingLeft=&@dimen/activity_horizontal_margin&
android:paddingRight=&@dimen/activity_horizontal_margin&
android:paddingTop=&@dimen/activity_vertical_margin&
android:paddingBottom=&@dimen/activity_vertical_margin& tools:context=&.MainActivity&
&com.github.mikephil.charting.charts.LineChart
android:id=&@+id/spread_line_chart&
android:layout_width=&match_parent&
android:layout_height=&fill_parent&
android:layout_gravity=&center_horizontal&
&/RelativeLayout&
LineCharFragment.java文件
package com.example.chenyu.
import android.app.F
import android.graphics.C
import android.os.B
import android.support.annotation.N
import android.view.LayoutI
import android.view.V
import android.view.ViewG
import com.github.mikephil.charting.charts.LineC
import com.github.ponents.L
import com.github.mikephil.charting.data.E
import com.github.mikephil.charting.data.LineD
import com.github.mikephil.charting.data.LineDataS
import java.util.ArrayL
* Created by Think on .
public class LineCharFragment extends Fragment {
public LineChart lineC
public ArrayList&String& x = new ArrayList&String&();
public ArrayList&Entry& y = new ArrayList&Entry&();
public ArrayList&LineDataSet& lineDataSets = new ArrayList&LineDataSet&();
public LineData lineData =
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.liner_chart, container, false);
lineChart = (LineChart) view.findViewById(R.id.spread_line_chart);
LineData resultLineData = getLineData(40, 100);
showChart();
* 初始化数据
* count 表示坐标点个数，range表示等下y值生成的范围
public LineData getLineData(int count, float range) {
for (int i = 0; i & i++) {
//X轴显示的数据
x.add(i + &&);
for (int i = 0; i & i++) {//y轴的数据
float result = (float) (Math.random() * range) + 3;
y.add(new Entry(result, i));
LineDataSet lineDataSet = new LineDataSet(y, &折线图&);//y轴数据集合
lineDataSet.setLineWidth(1f);//线宽
lineDataSet.setCircleSize(2f);//现实圆形大小
lineDataSet.setColor(Color.RED);//现实颜色
lineDataSet.setCircleSize(Color.BLUE);//圆形颜色
lineDataSet.setHighLightColor(Color.WHITE);//高度线的颜色
lineDataSets.add(lineDataSet);
lineData = new LineData(x, lineDataSets);
return lineD
* 设置样式
public void showChart() {
lineChart.setDrawBorders(false);//是否添加边框
lineChart.setDescription(&有风险的数据&);//数据描述
lineChart.setNoDataTextDescription(&我需要数据&);//没数据显示
lineChart.setDrawGridBackground(true);//是否显示表格颜色
lineChart.setBackgroundColor(Color.YELLOW);//背景颜色
lineChart.setData(lineData);//设置数据
Legend legend = lineChart.getLegend();//设置比例图片标示，就是那一组Y的value
legend.setForm(Legend.LegendForm.CIRCLE);//样式
legend.setFormSize(6f);//字体
legend.setTextColor(Color.WHITE);//设置颜色
lineChart.animateX(2000);//X轴的动画
更具树状图的解说，这个可以对比参照，而且我基本上每行代码都有注释，大家应该可以看懂
效果图如下：
第五步：实现饼状图
pie_chart.xml文件如下
&RelativeLayout xmlns:android=&/apk/res/android&
xmlns:tools=&/tools& android:layout_width=&match_parent&
android:layout_height=&match_parent& android:paddingLeft=&@dimen/activity_horizontal_margin&
android:paddingRight=&@dimen/activity_horizontal_margin&
android:paddingTop=&@dimen/activity_vertical_margin&
android:paddingBottom=&@dimen/activity_vertical_margin& tools:context=&.MainActivity&
&com.github.mikephil.charting.charts.PieChart
android:id=&@+id/pie_chart&
android:layout_width=&match_parent&
android:layout_height=&fill_parent&
android:layout_gravity=&center_horizontal&
&/RelativeLayout&
PieCharFragment.java文件如下
package com.example.chenyu.
import android.app.F
import android.graphics.C
import android.os.B
import android.support.annotation.N
import android.util.DisplayM
import android.view.LayoutI
import android.view.V
import android.view.ViewG
import com.github.mikephil.charting.charts.PieC
import com.github.ponents.L
import com.github.mikephil.charting.data.E
import com.github.mikephil.charting.data.PieD
import com.github.mikephil.charting.data.PieDataS
import java.util.ArrayL
* Created by Think on .
public class PieCharFragment extends Fragment {
public PieChart mC
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.pie_chart, container, false);
mChart = (PieChart) view.findViewById(R.id.pie_chart);
PieData mPieData = getPieData(4, 100);
showChart(mChart, mPieData);
private void showChart(PieChart pieChart, PieData pieData) {
pieChart.setHoleColorTransparent(true);
pieChart.setHoleRadius(60f);
pieChart.setTransparentCircleRadius(64f); // 半透明圈
//pieChart.setHoleRadius(0)
pieChart.setDescription(&测试饼状图&);
// mChart.setDrawYValues(true);
pieChart.setDrawCenterText(true);
//饼状图中间可以添加文字
pieChart.setDrawHoleEnabled(true);
pieChart.setRotationAngle(90); // 初始旋转角度
// draws the corresponding description value into the slice
// mChart.setDrawXValues(true);
// enable rotation of the chart by touch
pieChart.setRotationEnabled(true); // 可以手动旋转
// display percentage values
pieChart.setUsePercentValues(true);
//显示成百分比
// mChart.setUnit(& EUR&);
// mChart.setDrawUnitsInChart(true);
// add a selection listener
mChart.setOnChartValueSelectedListener(this);
// mChart.setTouchEnabled(false);
mChart.setOnAnimationListener(this);
pieChart.setCenterText(&Quarterly Revenue&);
//饼状图中间的文字
pieChart.animateY(3000);
//设置数据
pieChart.setData(pieData);
// undo all highlights
pieChart.highlightValues(null);
pieChart.invalidate();
Legend mLegend = pieChart.getLegend();
//设置比例图
mLegend.setPosition(Legend.LegendPosition.RIGHT_OF_CHART);
//最右边显示
mLegend.setForm(LegendForm.LINE);
//设置比例图的形状，默认是方形
mLegend.setXEntrySpace(7f);
mLegend.setYEntrySpace(5f);
pieChart.animateXY();
//设置动画
// mChart.spin(0);
* @param count 分成几部分
* @param range
private PieData getPieData(int count, float range) {
ArrayList&String& xValues = new ArrayList&String&();
//xVals用来表示每个饼块上的内容
for (int i = 0; i & i++) {
xValues.add(&Quarterly& + (i + 1));
//饼块上显示成Quarterly1, Quarterly2, Quarterly3, Quarterly4
ArrayList&Entry& yValues = new ArrayList&Entry&();
//yVals用来表示封装每个饼块的实际数据
// 饼图数据
* 将一个饼形图分成四部分， 四部分的数值比例为14:14:34:38
* 所以 14代表的百分比就是14%
float quarterly1 = 14;
float quarterly2 = 14;
float quarterly3 = 34;
float quarterly4 = 38;
yValues.add(new Entry(quarterly1, 0));
yValues.add(new Entry(quarterly2, 1));
yValues.add(new Entry(quarterly3, 2));
yValues.add(new Entry(quarterly4, 3));
//y轴的集合
PieDataSet pieDataSet = new PieDataSet(yValues, &Quarterly Revenue 2014&/*显示在比例图上*/);
pieDataSet.setSliceSpace(0f); //设置个饼状图之间的距离
ArrayList&Integer& colors = new ArrayList&Integer&();
// 饼图颜色
colors.add(Color.rgb(205, 205, 205));
colors.add(Color.rgb(114, 188, 223));
colors.add(Color.rgb(255, 123, 124));
colors.add(Color.rgb(57, 135, 200));
pieDataSet.setColors(colors);
DisplayMetrics metrics = getResources().getDisplayMetrics();
float px = 5 * (metrics.densityDpi / 160f);
pieDataSet.setSelectionShift(px); // 选中态多出的长度
PieData pieData = new PieData(xValues, pieDataSet);
return pieD
效果图如下：
第六步：实现散列图
scatter_chart.xml文件如下：
&RelativeLayout xmlns:android=&/apk/res/android&
xmlns:tools=&/tools& android:layout_width=&match_parent&
android:layout_height=&match_parent& android:paddingLeft=&@dimen/activity_horizontal_margin&
android:paddingRight=&@dimen/activity_horizontal_margin&
android:paddingTop=&@dimen/activity_vertical_margin&
android:paddingBottom=&@dimen/activity_vertical_margin& tools:context=&.MainActivity&
&com.github.mikephil.charting.charts.ScatterChart
android:id=&@+id/scatter_chart&
android:layout_width=&match_parent&
android:layout_height=&fill_parent&
android:layout_gravity=&center_horizontal&
&/RelativeLayout&
package com.example.chenyu.
import android.app.F
import android.graphics.C
import android.os.B
import android.support.annotation.N
import android.view.LayoutI
import android.view.V
import android.view.ViewG
import com.github.mikephil.charting.charts.BarC
import com.github.mikephil.charting.charts.ScatterC
import com.github.ponents.L
import com.github.ponents.LimitL
import com.github.mikephil.charting.data.BarD
import com.github.mikephil.charting.data.BarDataS
import com.github.mikephil.charting.data.BarE
import com.github.mikephil.charting.data.E
import com.github.mikephil.charting.data.LineD
import com.github.mikephil.charting.data.LineDataS
import com.github.mikephil.charting.data.ScatterD
import com.github.mikephil.charting.data.ScatterDataS
import com.github.mikephil.charting.utils.ColorT
import java.util.ArrayL
* Created by Think on .
public class ScatterChartFragment extends Fragment {
public ScatterChart scatterC
public ArrayList&String& x = new ArrayList&String&();
public ArrayList&Entry& y = new ArrayList&Entry&();
public ArrayList&ScatterDataSet& scatterDataSets = new ArrayList&ScatterDataSet&();
public ScatterData scatterData =
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.scatter_chart, container, false);
scatterChart = (ScatterChart) view.findViewById(R.id.scatter_chart);
ScatterData resultScatterData = getRadarData(40, 100);
showChart();
* 初始化数据
* count 表示坐标点个数，range表示等下y值生成的范围
public ScatterData getRadarData(int count, float range) {
for (int i = 0; i & i++) {
//X轴显示的数据
x.add(i + &&);
for (int i = 0; i & i++) {//y轴的数据
float result = (float) (Math.random() * range) + 3;
y.add(new Entry(result, i));
ScatterDataSet scatterDataSet = new ScatterDataSet(y, &散状图&);//y轴数据集合
scatterDataSet.setColor(Color.RED);//现实颜色
scatterDataSet.setScatterShapeSize(6f);
scatterDataSet.setDrawValues(true);
scatterDataSet.setHighLightColor(Color.WHITE);//高度线的颜色
scatterDataSets.add(scatterDataSet);
scatterData = new ScatterData(x, scatterDataSets);
return scatterD
* 设置样式
public void showChart() {
scatterChart.setDrawBorders(false);//是否添加边框
scatterChart.setDescription(&有风险的数据&);//数据描述
scatterChart.setNoDataTextDescription(&我需要数据&);//没数据显示
scatterChart.setDrawGridBackground(true);//是否显示表格颜色
scatterChart.setBackgroundColor(Color.YELLOW);//背景颜色
scatterChart.setData(scatterData);//设置数据
Legend legend = scatterChart.getLegend();//设置比例图片标示，就是那一组Y的value
legend.setForm(Legend.LegendForm.CIRCLE);//样式
legend.setFormSize(6f);//字体
legend.setTextColor(Color.WHITE);//设置颜色
scatterChart.animateX(2000);//X轴的动画
效果图如下：
第七步：实现雷达图
radar_chart.xml文件如下
&RelativeLayout xmlns:android=&/apk/res/android&
xmlns:tools=&/tools& android:layout_width=&match_parent&
android:layout_height=&match_parent& android:paddingLeft=&@dimen/activity_horizontal_margin&
android:paddingRight=&@dimen/activity_horizontal_margin&
android:paddingTop=&@dimen/activity_vertical_margin&
android:paddingBottom=&@dimen/activity_vertical_margin& tools:context=&.MainActivity&
&com.github.mikephil.charting.charts.RadarChart
android:id=&@+id/radar_chart&
android:layout_width=&match_parent&
android:layout_height=&fill_parent&
android:layout_gravity=&center_horizontal&
&/RelativeLayout&
package com.example.chenyu.
import android.app.F
import android.graphics.C
import android.os.B
import android.support.annotation.N
import android.view.LayoutI
import android.view.V
import android.view.ViewG
import com.github.mikephil.charting.charts.LineC
import com.github.mikephil.charting.charts.RadarC
import com.github.ponents.L
import com.github.mikephil.charting.data.E
import com.github.mikephil.charting.data.LineD
import com.github.mikephil.charting.data.LineDataS
import com.github.mikephil.charting.data.RadarD
import com.github.mikephil.charting.data.RadarDataS
import java.util.ArrayL
* Created by Think on .
public class RadarCharFragment extends Fragment {
public RadarChart radarC
public ArrayList&String& x = new ArrayList&String&();
public ArrayList&Entry& y = new ArrayList&Entry&();
public ArrayList&RadarDataSet& radarDataSets = new ArrayList&RadarDataSet&();
public RadarData radarData =
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.radar_chart, container, false);
radarChart = (RadarChart) view.findViewById(R.id.radar_chart);
RadarData resultLineData = getRadarData(40, 100);
showChart();
* 初始化数据
* count 表示坐标点个数，range表示等下y值生成的范围
public RadarData getRadarData(int count, float range) {
for (int i = 0; i & i++) {
//X轴显示的数据
x.add(i + &&);
for (int i = 0; i & i++) {//y轴的数据
float result = (float) (Math.random() * range) + 3;
y.add(new Entry(result, i));
RadarDataSet radarDataSet = new RadarDataSet(y, &雷达图&);//y轴数据集合
radarDataSet.setLineWidth(1f);//线宽
radarDataSet.setColor(Color.RED);//现实颜色
radarDataSet.setHighLightColor(Color.WHITE);//高度线的颜色
radarDataSets.add(radarDataSet);
radarData = new RadarData(x, radarDataSets);
return radarD
* 设置样式
public void showChart() {
radarChart.setDrawBorders(false);//是否添加边框
radarChart.setDescription(&有风险的数据&);//数据描述
radarChart.setNoDataTextDescription(&我需要数据&);//没数据显示
radarChart.setDrawGridBackground(true);//是否显示表格颜色
radarChart.setBackgroundColor(Color.YELLOW);//背景颜色
radarChart.setData(radarData);//设置数据
Legend legend = radarChart.getLegend();//设置比例图片标示，就是那一组Y的value
legend.setForm(Legend.LegendForm.CIRCLE);//样式
legend.setFormSize(6f);//字体
legend.setTextColor(Color.WHITE);//设置颜色
radarChart.animateY(2000);//X轴的动画
第八步：总结
1、 开源项目导入库的练习，我以前没有出过错，这次除了点错误，原来是我忘记了 compile project(':mplib')添加，导致项目可以导入包，但是还是会编译通不过，下次要记得添加上去。
2、对于项目那个右上角的那3个点的菜单终于有反应了，之前老是显示不出来，心里舒服了点。
3、把这个小练习从android studio上传到github上面遇到一些问题，然后自己解决了。
4、对MPAndroidChart有了一定的认识，然后把它们之间的各种Chart对比学习，只要把一个搞懂了其它的差不多，以后我们要是有类似的开源项目，可以对比学习。
源码下载：
好了，快2点了，可以回去睡觉了，如果你觉得这篇博客你以后的项目可能会用得到，或者让你学到了新知识，或者给你的眼睛带来一点点视觉冲击，或者被我感染了，就start我呗。
github地址:
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}